ExtJS. Ajustement de la Grille de la Largeur d'un Panneau

Je suis très nouveau sur ExtJs et je ne peux pas résoudre un problème.

J'ai une grille qu'il est ajustée à son panneau de conteneur (mise en page:ajustement) mais quand je colapse le panneau de la grille de ne pas s'adapter à la nouvelle Largeur. Si je ne me trompe pas, ExtJs pouvez le faire automatiquement.

Voici mon code

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>

Quelqu'un peut m'aider?

Que vous

InformationsquelleAutor Juan Ramón | 2011-11-24