Populate 2 Grids with the same Store

Question

I have 2 grids and both of these grids will populate it self from the same store Person.

The problem i have is, In the first grid i will load all the Sports and the number of players it has. In the 2nd grid, i will show only the number of medals and gold medals won by a Sport, where SportID = 3. How can i do this ? When i load the grid, it gets populated with all

 {
                    xtype: 'gridpanel',
                    title: 'ALl Sports',
                    store: 'Person',
                    columns: [
                    {
                            xtype: 'gridcolumn',
                            dataIndex: 'SportID',
                            text: 'Sport ID'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'SportName',
                            text: 'Sport Name'
                        },                        
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'NoOfPlayers',
                            text: 'No Of Players'
                        }
                    ]
                },
                {
                    xtype: 'gridpanel',
                    title: 'Sport Medals for Sport ID 3',
                    store: 'Person',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'noOfMedals',
                            text: 'No Of Medals'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'NoOfGold',
                            text: 'No Of Gold'
                        }
                    ],

I have 2 grids and both of these grids will populate it self from the same store Person. These 2 grids are in a Window. When the window loads, i populate the grid as follows;

UPDATE 1 #############################3

var personStore = Ext.getStore('Person');
var r = personStore.getAt(0);
personStore.on('load', function() {
    r = personStore.getAt(0);
st.filter({
    filterFn: function(rec) {
        return rec.get('PersonId') == r.get('PersonId'); 
    }


});
personStore.load();

#######################3

But, both grid populates with the same set of data. What i want is to display all of the sports Information on Grid 1 (sportID,sportName,noOfPlayers), and Display Sport Information (noOfMedals,noOfGolds) WHERE sportId='3'. How can i do this ?

Answer 1

Short answer - you can't. If you need to present two different grids at the same time with same store you need to clone store and have another copy of it.

If it's not at the same time - you can use filtering and filter one store before grid is shown.