6

layout:'hbox'との違いは何layout:'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'
}]

例 ' hbox ':

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

3 に答える 3

5

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 リサイズ

300px リサイズ

要約すると、物事を左に浮かせるレイアウトと、や のような機能を追加するレイアウトとcolumn考えることができます。どちらもそれぞれのバージョンの屈曲があります。autohboxboxstretchpack

于 2013-08-19T22:25:00.937 に答える
3

ColumnVBoxとの前のフレームワークの以前のバージョンに存在していましたHBox。ほとんどの場合、互換性の理由から保持されています。とりわけ、HBoxより多くの機能 (packおよび) を提供します。align

于 2013-08-19T11:48:46.367 に答える