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

Question

layout:'hbox'和有什么区别layout:'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'
}]

示例“ hbox ”：

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

Answer 1

有几个明显的优点column尚未涵盖。它比hbox. Column只是让浏览器使用浮动来布局其内容，而不是设置left它，它的标记也比hbox. 在大多数情况下，它还可以更好地处理溢出。

例如在列布局与窗口上的 hbox

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()

总而言之，可以将其column视为一种auto将事物向左浮动的布局，以及hbox一种box添加了 和 之类的功能stretch的布局pack。他们都有自己的弯曲版本。

Answer 2

Column存在于较早版本的框架中，VBox而HBox. 它主要是出于兼容性原因而保留的。HBox提供更多功能（pack和align）等。

Answer 3

列没有自动高度，而 HBox 有，所有区域都已满。

看看这些例子：

http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html