How do I destroy an ExtJS grid without affecting its store?

Question

I have an ExtJS store like so:

var dataStore = new Ext.data.JsonStore({...});

I'm using it with a factory to get a GridPanel:

function CreateGrid(config) {
    return new Ext.grid.GridPanel({
        store: dataStore,
        ...
    })
};

Now, when I run this code:

new Ext.Window({
    closable: true,
    items: CreateGrid(),
}).show();

The first time I run it, the grid works fine. However, if I close the window and re-open another one, I can't sort the columns anymore, nor refresh the store.

I've pinpointed the issue down to the store, and whatever is happening to it when the grid is destroyed. If I change my CreateGrid() function to this instead:

function CreateGrid(config) {
    return new Ext.grid.GridPanel({
        store: new Ext.data.JsonStore({...}),
        ...
    }
};

It works perfectly fine, except I'm getting a new store each time instead of re-using the old one.

How do I fix this problem so that I can destroy the grid without messing up the store? The thought behind this is that I want to keep the store around in order to preserve the column sorting and filtering, but destroy the grid in order to save on memory.

Answer 1

You do not specify how you close the window (by calling the close method, or closing the window from UI), but perhaps you should hide it instead? Quoting ExtJS documentation:

By default, the close header tool destroys the Window resulting in destruction of any child Components. This makes the Window object, and all its descendants unusable. To enable re-use of a Window, use closeAction: 'hide'.

And about the closeAction config option specifically:

This setting does not affect the close method which will always destroy the window. To programatically hide a window, call hide.

Answer 2

In your store, set autoDestroy: false.

Answer 3

The thought behind this is that I want to keep the store around in order to preserve the column sorting and filtering, but destroy the grid in order to save on memory.

Is column sorting and filtering kept intrnally on the GridPanel object, or on the Store object? I'm not sure without digging into the src code. This might be your issue. Maybe you can achieve "remembering" the sort/filter in a cookie (see Ext.state.Manager).

You can also try just hiding the grid instead of removing it, as suggested by Tommi. If you only have this one grid, memory usage shouldn't be too bad.

One last thing to try: in your factory fn, create the grid and then attach the store to it using grid.store = dataStore;

Answer 4

I found out what the problem is. There's a bug with the Livegrid extension that messes up the underlying livegrid-specific store when the grid is closed.