title: Populate 2 Grids with the same Store
body: <p>I have 2 grids and both of these grids will populate it self from the same store <code>Person</code>. </p>
  
  <p>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 <code>SportID = 3</code>. How can i do this ? When i load the grid, it gets populated with all </p>
  
  <pre><code> {
                      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'
                          }
                      ],
  </code></pre>
  
  <p>I have 2 grids and both of these grids will populate it self from the same store <code>Person</code>. These 2 grids are in a Window. When the window loads, i populate the grid as follows;</p>
  
  <p><strong>UPDATE 1</strong> #############################3</p>
  
  <pre><code>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();
  </code></pre>
  
  #######################3
  
  <p>But, both grid populates with the same set of data. What i want is to display all of the sports Information on Grid 1 (<code>sportID</code>,<code>sportName</code>,<code>noOfPlayers</code>), and Display Sport Information (<code>noOfMedals</code>,<code>noOfGolds</code>) <code>WHERE sportId='3'</code>. How can i do this ?</p>