什麼是不同佈局：'hbox'和佈局：'列'

有什麼區別layout:'hbox'和layout:'column'？它只是語法嗎？什麼是不同佈局：'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' 
}]

實施例' hbox中'：

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

來源

2013-08-19 Michael Phelps

有幾個還沒有被覆蓋的column明顯的優勢。它比hbox輕得多。 Column只是讓瀏覽器使用浮動佈局其內容，而不是設置left它也比hbox少標記。它也可以在大多數情況下更好地處理溢出。

例如，在列布局VS一個橫向盒一個窗口

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

600px resize