ExtJS如何停靠填充4个面板
我有以下选项卡,其中有4个面板: 我试着调整和缩放4个面板,使它们填满孔选项卡面板,但没有成功 这是我的密码:ExtJS如何停靠填充4个面板,extjs,extjs4,Extjs,Extjs4,我有以下选项卡,其中有4个面板: 我试着调整和缩放4个面板,使它们填满孔选项卡面板,但没有成功 这是我的密码: Ext.define('softhuman.view.MainPanel', { extend: 'Ext.tab.Panel', xtype: 'mainpanel', items: [{ title: 'Dashboard', glyph: Glyphs.DASHBOARD,
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
}]
}]
有什么线索吗?使用方框布局:
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'
}]
}]
}
});
});
很好,但我如何才能使每个面板填满它的空间?你说的“填满它的空间”是什么意思?