लेआउट के बीच अंतर क्या है: 'hbox' और लेआउट: 'कॉलम'

Question

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} 
] 

Answer 1

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

एक auto लेआउट कि बाईं ओर बातें तैरता के रूप में column का लगता है कि यह कुल मिलाकर और hboxbox लेआउट के रूप में जो stretch और pack जैसी कार्यक्षमता जोड़ता है। दोनों के पास फ्लेक्सिंग के उनके संस्करण हैं।

Answer 2

ColumnVBox और HBox से पहले ढांचे के पिछले संस्करण में ही अस्तित्व में। इसे ज्यादातर संगतता कारणों के लिए रखा गया है। HBox अन्य चीजों के साथ, अधिक कार्यक्षमता (pack और align) प्रदान करता है।

Answer 3

कॉलम में ऑटोहेइट और एचबॉक्स नहीं है, तो सभी क्षेत्र पूर्ण हैं।

इन उदाहरणों पर एक नज़र डालें:

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