ExtJS如何对接填充4个面板
ExtJS如何对接填充4个面板
提问于 2014-05-31 01:31:33
我有下面的标签，里面有4个面板：
我已经尝试了安装和缩放4个面板，所以他们填补了孔标签面板，但没有任何成功。
这是我的代码：
Ext.define('softhuman.view.MainPanel', {
extend: 'Ext.tab.Panel',
xtype: 'mainpanel',
items: [{
title: 'Dashboard',
glyph: Glyphs.DASHBOARD,
padding: '5',
layout: {
type: 'table',
columns: 4
},
defaults: {
frame: true,
style: 'margin: 0 10px 10px 0',
height: 260,
flex: 1
},
items: [{
// title: 'Item 1',
colspan: 1,
width: 500
}, {
// title: 'Item 2',
colspan: 3,
width: 500
}, {
// title: 'Item 3',
colspan: 2,
width: 500,
items: [{
xtype: 'tabpanel',
activeTab: 0,
//width: '100%',
items: [{
xtype: 'panel',
title: 'Item 1',
items: [{
xtype: 'gridpanel',
height: 230,
border: 1,
enableColumnHide: false,
enableColumnMove: false,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Column 1'
}, {
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Column 2'
}, {
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Column 3'
}
]
}]
}, {
xtype: 'panel',
title: 'Item 2'
}, {
xtype: 'panel',
title: 'Item 3'
}, {
xtype: 'panel',
title: 'Item 4 '
}, {
xtype: 'panel',
title: 'Item 5'
}]
}]
}, {
// title: 'Item 4',
colspan: 2,
width: 500
}]
}]有线索吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-31 02:12:12
使用框布局：
Ext.require('*');
Ext.onReady(function() {
new Ext.tab.Panel({
renderTo: document.body,
width: 600,
height: 600,
items: {
title: 'Foo',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
title: 'P1'
}, {
flex: 1,
title: 'P2'
}]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
title: 'P3'
}, {
flex: 1,
title: 'P4'
}]
}]
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23965572
复制相关文章
相似问题
腾讯云开发者
