layout:'hbox' 和 layout:'column' 有什么区别 [英] What is difference beetween layout:'hbox' and layout:'column'

问题描述

layout:'hbox' 和 layout:'column' 有什么区别?只是语法吗?

What is difference beetween layout:'hbox' and layout:'column'? Is it only syntax?

示例列":

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

推荐答案

column 有几个明显的优点尚未涉及.它比 hbox 轻得多.Column 只是让浏览器用浮动来布局它的内容，而不是设置 left 它也比 hbox 具有更少的标记.在大多数情况下，它还可以更好地处理溢出.

There are a couple of distinct advantages of column that have not been covered. It is much more lightweight than hbox. Column just lets the browser layout its contents with floats instead of setting the left it also has less markup than an hbox. It also handles overflows better in most cases.

例如在列布局与窗口上的 hbox 中

For example in a column layout vs a hbox on a window

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

总而言之，将 column 视为一个 auto 布局，将东西浮动到左侧，将 hbox 视为一个 box 布局，它添加了 stretch 和 pack 等功能.他们都有自己的弯曲版本.

To sum it up think of column as an auto layout that floats things to the left and hbox as a box layout which adds the functionality like stretch and pack. They both have their versions of flexing.

这篇关于layout:'hbox' 和 layout:'column' 有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！