ExtJS. Fit Grid Width into a Panel
I'm very new on ExtJs and I can't solve a problem.
I have a grid that it is adjusted to its panel container (layout:fit) but when I colapse the panel, the grid doesn't adjust to the new Width. If I'm not mistaken, ExtJs can do this automaticaly.
Here is my 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>
Can someone help me?
Than you
Answer
replace the below
layout:'fit'
with this
layout:{
type:'fit',
align:'stretch',
pack:'start'
}