Why does my Grid not get recreated after clsoing the tab pane

[gurusingh]

Hiya

I am using EXTJS 1.1.

I have a left panel treeview and on click of a node, it populated a grid on the right side. Now the right panel shows a grid and the content panel is closable. For each node the user clicks on, a new gridpanel gets displayed in the main borderlayout.

Now if I close a panel and then again click on the treenode to view the grid, the border layout displays the pane/tab but without the grid. Please bear in the mind that I am not recreating my grid obect as it is already in the memory so I am tring to reuse that same grid that I defined when it was initially rendered. I even tried recreateing the new grid but stlll it does not work.

I have a main border layout and in the center region i have another border layout whch hosts the GridPanel in north region and I am trying to add the GRIDPANEL again to this region but it does not show.

Also can you tell me does my grid object or its DIV get destroyed/removed from the DOM if i close the pane? Why i ask this is that the grid gives an error whe i recreate the second time i.e. it is not able tofind a element.

Thanks in advance for your time. I need a soluton which will help me to resolve my problem.

Cheers
G

[gurusingh]

I have sorted it out ... it seems that the borderlayout object gets destroyed and thus i have to recreate it before I can add the gridpanel again into it.

Can someone confirm if this is theright way?

Cheeers
G

[enterco]

I've seen the same behaviour in ExtJS ver. 2.0.1, if the tab is closed, then when attempting to reopen the tab, it's empty. Here's my relevant working code:

var viewport = new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0
},
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigare',
xtype: 'treepanel',
width: 120,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: treemenuroot,
rootVisible: false,
// ......
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabpanel',
deferredRender: true,
enableTabScroll: true,
layoutOnTabChange: true,
items: {
title: 'Default tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Informatii',
collapsible: true,
autoScroll: true,
id: 'tab_default',
html: 'Information goes here',
split: true,
height: 80,
minHeight: 80
}] /* end of viewport items */
}); /* end of new ext.viewport */



and here's a function to show a grid in a new/existing panel, called from a tree menu:

function show_grid_tab () {
var tabpanel=Ext.getCmp('tabpanel');
var grid_tab=tabpanel.getComponent('grid1');
// is there a tab with the id grid1 ?
if (grid_tab) {
// activate the tab
tabpanel.setActiveTab(grid_tab);
// if the gridpanel does not exist, then create it
if (! gridpanel1) {
gridpanel1_initpanel ();
}
} else {
// initialize all
tabpanel.add({
title: 'Grid in a tab',
id: 'grid1',
autoScroll: true,
closable: true,
layoutOnChange: true
});
grid_tab=tabpanel.getComponent('grid1');
tabpanel.setActiveTab(grid_tab);
ds1.load(); // load data into the datastore
gridpanel1_initpanel ();
grid_tab.add(gridpanel1);
grid_tab.doLayout();
}
}


Here's the function I use to create the gridpanel

var gridpanel1; // global variable, gridpanel1
function gridpanel1_initpanel () {
gridpanel1 = new Ext.grid.GridPanel({
ds: ds_1,
cm: cm_1,
width: 700,
height: 250,
layout: 'fit',
stripeRows: true,
id: 'gridpanel1',
title: 'Grid #1'
});
}