Czym różnią się układy między układami: "hbox" i układ: "kolumna"

Question

Jaka jest różnica między ikonami layout:'hbox' i layout:'column'? Czy to tylko składnia?

Przykład 'kolumna '

layout:'column', 
items: [{ 
    title: 'Width = 25%', 
    columnWidth: .25, 
    html: 'Content' 
},{ 
    title: 'Width = 75%', 
    columnWidth: .75, 
    html: 'Content' 
},{ 
    title: 'Width = 250px', 
    width: 250, 
    html: 'Content' 
}] 

Przykład' 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

Istnieje kilka różnych zalet column, które nie zostały pokryte. Jest o wiele lżejszy niż hbox. Column po prostu umożliwia przeglądarce przeglądanie zawartości za pomocą spławikόw zamiast ustawiania left, a także ma mniej znaczników niż hbox. W większości przypadków obsługuje również przepełnienia.

Na przykład w układzie kolumny vs w hbox na oknie

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

Podsumowując myśleć o column jako auto układ, który pływa rzeczy w lewo i hbox jako układ box, który dodaje funkcje takie jak stretch i pack. Obaj mają swoje wersje wyginania.

Answer 2

Column istnieją w poprzedniej wersji ramy przed VBox i HBox. Jest głównie przechowywany ze względu na kompatybilność. HBox oferuje więcej funkcji (pack i align), między innymi.

Answer 3

Kolumna nie ma autoheight i HBox ma, cały region jest pełny.

Spójrz na te przykłady:

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