我是 ExtJs 的新手，我无法解决问题。
我有一个网格，它已调整到其面板容器 (layout:fit)，但是当我折叠面板时，网格不会调整到新的宽度。如果我没记错的话，ExtJs 可以自动执行此操作。
这是我的代码
Ext.create('Ext.Viewport', {
id: 'myview',
layout: 'border',
items:
[
{
//Top region
region: 'north',
title: "My north Title",
//split: false,
tbar: CreateTButtons() //Create some toolbar buttons
}, {
//South region
region: 'south',
contentEl: 'footer',
split: true,
height: 25,
minSize: 100,
maxSize: 200,
collapsible: false,
collapsed: false,
margins: '0 0 0 0',
align:'right'
}, {
//East region
xtype: 'tabpanel',
id: 'eastTabPanel',
region: 'east',
title: "My east title",
dockedItems: GetEastItems(), //Create East Items
animCollapse: true,
collapsible: true,
split: false,
width: 225,
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom'
}, {
//West items
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 0',
layout: 'accordion',
items: GetWestItems() //Create west items
},
objTabPanel //Here is my problem. Center region is a TabPanel
]
});
//objTabPanel
objTabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
id: 'mainTabPanel',
/*forceFit: true,*/
layout: 'fit',
viewConfig: {forceFit: true}, //Very important to autosize to the container layer
//deferredRender: false,
activeTab: 0,
items: CMainContent() //Creates a very simple grid
})
//This is the very simple grid
grid = new Ext.grid.GridPanel({
title: "My Grid Title",
store: store,
stripeRows: true,
//forceFit: true,
layout: 'fit',
// grid columns
columns:
[
{
id: 'id',
header: "Id",
dataIndex: 'Id',
width: 50,
sortable: true
}, {
id: 'name',
header: "Name",
dataIndex: 'Name',
width: 100,
sortable: true
}
],
viewConfig: { forceFit: true }, //Very important to autosize to the container layer
tbar: //tbar = TopBar
[
{
text: "Add",
iconCls: 'btn-add',
scope: this,
handler: addHandler
}
],
// paging bar on the bottom
//bbar = BottomBar
bbar: new Ext.PagingToolbar({
pageSize: 50,
store: myStore,
displayInfo: true,
emptyMsg: "No topics to display"
})
});
//To render the grid
grid.render('panel');
//My initial HTML Code
<body>
<div id="content">
<div id="panel"></div>
</div>
</body>
有人可以帮助我吗？
比你好
最佳答案
替换下面的
layout:'fit'
有了这个
layout:{
type:'fit',
align:'stretch',
pack:'start'
}
关于ExtJS。使网格宽度适合面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8259540/