我正在尝试渲染 Panel占据整个水平空间的 A。然后我尝试在面板 A 下方渲染两个面板 B 和 C,它们都占据 50% 的水平空间。
因此,我要实现的是这样的结构:
-------------
| A |
-------------
| B | C |
-------------
但是如图所示fiddle我正在实现以下面板渲染:
-------------
| A |
-------------
| B |
-------------
| C |
-------------
请随时 fork fiddle如上所述实现我需要的对齐。
最佳答案
有这样的 View 怎么样:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.container.Container',
padding: 10,
layout: {
align: 'stretch',
pack: 'center',
type: 'vbox'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
flex: 1,
height: 150,
title: 'A'
},
{
xtype: 'container',
flex: 1,
height: 150,
layout: {
padding: '10 0 10 0',
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'panel',
flex: 1,
width: 150,
title: 'B'
},
{
xtype: 'panel',
flex: 1,
width: 150,
title: 'C'
}
]
}
]
});
me.callParent(arguments);
}
});
关于javascript - ExtJS 面板布局 : how to correctly layout Panels,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15998540/