布局之间有什么区别：'hbox'和layout：'column'

问题描述

布局：hbox和 layout：'column'有什么区别？只是语法？

示例'列'：

  layout：'column'，
 items：[{
 title：'Width = 25％'，
 columnWidth：.25，
 html：'Content '
}，{
 title：'Width = 75％'，
 columnWidth：.75，
 html：'Content'
}，{
标题：'Width = 250px'，
 width：250，
 html：'Content'
}] 
  

示例' hbox '：

  layout：{
类型：'hbox'，
 pack：'start'，
 align：'stretch'
}，
 items：[
 {html：'panel 1'，flex：1}，
 {html：'panel 2'，width：150}，
 {html：'panel 3'，flex：2} 
] 
  

解决方案

列有几个明显的优势尚未涵盖。它比 hbox 更轻巧。 列只是让浏览器将其内容与浮动文件进行布局，而不是设置 left 它的标记比 hbox中。在大多数情况下，它也可以处理溢出。

例如在列布局vs窗口中的hbox

  var win = Ext.create（'Ext.Window'，{
 width：700，
 height：400，
 title：Column 
默认值：{
 height：50，
 width：300 
}，
 layout：{
 type：'column'
} 
 items：[{
 xtype：'panel'，
 title：'Inner Panel One'
}，{
 xtype：'panel'，
标题：'Inner Panel Two'
}，{
 xtype：'panel'，
 title：'Inner Panel Three'
}] 
}）; 
 
 win.show（）
 
 var win2 = Ext.create（'Ext.Window'，{
 width：700，
 height：400 ，
标题：Hbox，
默认值：{
 height：50，
 width：300 
}，
布局：{
键入：'hbox'
}，
 items：[{
 xtype：'panel'，
 title：'Inner Panel One'
}，{
 xtype：'panel'，
 title：'Inner Panel Two'
}，{
 xtype：'panel'，
 title：'Inner Panel Three'
 }] 
}）; 
 
 win2.show（）
  

总而言之，将列列为 auto 布局，将东西浮动到左边， hbox 作为框布局，其中添加了 stretch 和 pack 等功能。他们都有自己的版本。

What is difference beetween layout:'hbox' and layout:'column'? Is it only syntax?

Example 'column':

layout:'column',
items: [{
    title: 'Width = 25%',
    columnWidth: .25,
    html: 'Content'
},{
    title: 'Width = 75%',
    columnWidth: .75,
    html: 'Content'
},{
    title: 'Width = 250px',
    width: 250,
    html: 'Content'
}]

Example 'hbox':

layout: {
    type: 'hbox',
    pack: 'start',
    align: 'stretch'
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', width:150},
    {html:'panel 3', flex:2}
]

解决方案

There are a couple of distinct advantages of column that have not been covered. It is much more lightweight than hbox. Column just lets the browser layout its contents with floats instead of setting the left it also has less markup than an hbox. It also handles overflows better in most cases.

For example in a column layout vs a hbox on a window

var win = Ext.create('Ext.Window', {
    width: 700,
    height: 400,
    title: "Column",
    defaults: {
        height: 50,
        width: 300
    },
    layout: {
        type: 'column'
    },
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One'
    },{
        xtype: 'panel',
        title: 'Inner Panel Two'
    },{
        xtype: 'panel',
        title: 'Inner Panel Three'
    }]
});

win.show()

var win2 = Ext.create('Ext.Window', {
    width: 700,
    height: 400,
    title: "Hbox",
    defaults: {
        height: 50,
        width: 300
    },
    layout: {
        type: 'hbox'
    },
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One'
    },{
        xtype: 'panel',
        title: 'Inner Panel Two'
    },{
        xtype: 'panel',
        title: 'Inner Panel Three'
    }]
});

win2.show()

To sum it up think of column as an auto layout that floats things to the left and hbox as a box layout which adds the functionality like stretch and pack. They both have their versions of flexing.

这篇关于布局之间有什么区别：'hbox'和layout：'column'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！