What is the difference between layout: "hbox" and layout: "column"

Question

What is the difference between layout:'hbox' and layout:'column' ? Is this just the 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 several distinct advantages of column that have not been covered. It is much easier than hbox . column just allows the browser to place its contents using float instead of setting left , it also has less markup than hbox . In most cases, it also handles overflows.

For example, in a vs hbox column layout in 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 summarize, think of column as an auto layout that moves things to the left and hbox as a box layout that adds features like stretch and pack . Both of them have their own bending options.

Answer 2

Column existed in an earlier version of the framework before VBox and HBox . It was mainly stored for compatibility reasons. HBox offers more functionality ( pack and align ), among other things.

Answer 3

The column does not have autoheight and the HBox does, the entire area is full.

Take a look at these examples:

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