Stand alone Grid Multiple Windows

[digitalwm]

Hi ,

I have the following issue:

- on a click event, I create a window in which I put a grid from a standalone variable, initialised at the parsing of the JS file.
- After I close the window, and trigger the click again I get a window with no content inside.

I am using Firefox 4 on this test, and below is my code



function showThing() {
operationWindow = Ext.create('Ext.window.Window', {
title : 'Transaction by account',
layout : 'fit',
items : [ OperationsByAccountGrid ]
});


operationWindow.on('beforeclose', function () {
operationWindow.remove(OperationsByAccountGrid);
});

Ext.StoreMgr.get('operationsByAccountListDataStore').load({
params : {
token : localStorage.getItem('AccessToken'),
}
});
operationWindow.show();
}


and the grid is defined in a js file like



var OperationsByAccountGrid = Ext.create('Ext.grid.Panel', {
autoHeight : true,
autoWidth : true,
layout : 'fit',
width : 800,
store : operationsByAccountListDataStore,
loadMask : true,
columns : [
{
header : '',
resizable : false,
sortable : false,
width : 35,
xtype : 'templatecolumn',
tpl : "<img src='{accountIcon}' width='20' height='20'>",
}
],
dockedItems: [{
xtype : 'pagingtoolbar',
store : operationsByAccountListDataStore,
dock : 'bottom',
displayInfo : true
}],
});


Thanks.

[tobiu]

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-closeAction

you are destroying the window and all child components.
in that case you need to create a new instance of your grid as well.

if you use window.hide() instead, the grid stays were it is and you do not need to try to manually remove and add it again.

[digitalwm]

To use window.hide() I guess i need to override the close button functionality of the window.. or not?

[digitalwm]

If anyone tries what I tried, I recommend you approach the situation from a different idea.

1. If you use hide(), you need to do some recursive calls to hide all items inside your window.
2. Once the window is destroyed, it destroys everything (Even if you create config variables in some other files and construct the grid / panel with that config, one the window is destroyed also the config is destroyed. (strange).

I would recommend myself :) to create construct functions in the Panels.js file, that contains the panel definition, and return the object to the caller. Once the window is destroyed we will not care, and the code will still be organized.

PS: Ext JS rocks :)