What is difference beetween layout:'hbox' and layout:'column'

问题

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}
]

回答1:

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.

回答2:

Column existed in an earlier version of the framework before VBox and HBox. It's mostly been kept for compatibility reasons. HBox offers more functionality (pack and align), amongst other things.

回答3:

Column doesn't have autoheight and HBox does, all the region is full.

Take a look at these examples :

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

来源：https://stackoverflow.com/questions/18311024/what-is-difference-beetween-layouthbox-and-layoutcolumn

标签

extjs

extjs4