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

Question

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

Answer 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.

Answer 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.

Answer 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