Was ist der Unterschied zwischen Layout: 'hbox' und Layout: 'Spalte'

Question

Was ist der Unterschied zwischen layout:'hbox' und layout:'column'? Ist es nur Syntax?

Beispiel 'Spalte ':

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

Beispiel' 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

ein paar deutliche Vorteile von column Es gibt, die nicht abgedeckt sind. Es ist viel leichter als hbox. Column lässt nur das Layout des Browsers seinen Inhalt mit Schwimmer statt left hat es auch weniger Markup als ein hbox. Überläufe werden in den meisten Fällen besser behandelt.

Zum Beispiel in einem Spaltenlayout vs einem hbox auf einem Fenster

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

Um es denkt an column als auto Layout zusammenfassen, dass die Dinge nach links schwimmt und hbox als ein box Layout, das die Funktionalität wie stretch und pack hinzufügt. Beide haben ihre Versionen von flexing.

Answer 2

Column existierte in einer früheren Version des Frameworks vor VBox und HBox. Es wurde hauptsächlich aus Kompatibilitätsgründen beibehalten. HBox bietet unter anderem mehr Funktionalität (pack und align).

Answer 3

Spalte hat keine Autohöhe und HBox tut, ist die ganze Region voll.

einen Blick auf diese Beispiele nehmen:

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