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
Vous devez vous connecter pour publier un commentaire.
remplacer le ci-dessous
avec cette
ici le code d'une application, l'esprit de la autoHeight dans la grille, le point d'ancrage de mise en page de la grille et de la mise en page: "ajustement" dans la fenêtre d'affichage et les onglets, j'espère que cela est utile
Cheers