EXTJS4: Approch to take for multiple Grids showing data from same store but each grid having different records

Question

Suppose that on single page there are two grids which has same column but different records to display.

There could be two solutions to it:

1. Use same Model and Store and filter on store before rendering the grid. Potential Problem in this solution: Since the underlying store is same, when the second grid will be Rendered the filter on first grid will get wiped off.

2. Use different Store definition and Model Definition (Keeping proxy and fields same as other store/model definition, but just changing the name): Problems: I tried this on Pandora application and it started giving strange issue such that the second grid did not display any records.

Which approach is better and how to resolve the corresponding issues.

-Thanks

Answer 1

We faced exactly same problem in our project. I ended up using the following approach:

• you define one model and one store class
• load store from the server for the first grid
• clone store object with all records (you might want to google for how exactly to do this)
• at this moment you need to decide whether you need just a local copy or copy that tied to the same data source on the server - both can be implemented based on what you need

I can post some sample code for cloning if you need it.

UPDATE

Here is code sample to clone store object:

cloneStore: function(store, storeClass) {
    var new_st = Ext.create(storeClass),
        recs = [],
        filter;

    store.each(function(r) {
        recs.push(r.copy)}
    );
    new_st.add(recs);

    return new_st;
},

Answer 2

The approach I took and recommend is not to reference the same instance of the store but create a new instance of your store for each grid:

store: Ext.create('MyStore',{...});