Extjs 布局之间的区别是什么：'；hbox'；和布局：'；列'；

布局：'hbox'

和

布局：'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'
}]

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

示例“hbox”：

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

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

---

Column

存在于

VBox

和

HBox

之前的早期版本框架中。它主要是出于兼容性原因而保留的

HBox

提供了更多功能（

pack

和

align

），以及其他功能

纵队 没有autoheight和HBox，所有区域都已满

请看以下示例：

---

列

有两个明显的优点，但尚未涉及。它比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()

总而言之，可以将

列

看作是一个将东西向左浮动的

自动

布局，

hbox

看作是一个

框

布局，它添加了

拉伸

和

打包

等功能。它们都有各自的屈曲版本