レイアウトの違いは何ですか： '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よりもマークアップも少なくなります。また、ほとんどの場合、オーバーフローが改善されます。

ウィンドウ上の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()

600px resize