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}
]
最佳答案
column
有几个明显的优势尚未涵盖的内容。它比 hbox
轻得多. Column
只是让浏览器用 float 来布局它的内容而不是设置 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()
总结起来想
column
作为 auto
向左 float 的布局和 hbox
作为 box
添加功能的布局,如 stretch
和 pack
.他们都有自己的弯曲版本。
关于extjs - 布局 :'hbox' 和布局 :'column' 有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18311024/