title: Merging Multiple Stores Into One
body: <p>I am attempting to create a grouped grid, and I am trying to merge data from 4 different stores into one store. Each store shares the same fields. The issue is that when all is loaded, only one of the stores has its data loaded into the store. The other records from the other stores are in the "removed" array of the main store. It appears they get added, then removed once the others are added. But what doesn't make sense is that I put starting data in, and once everything is loaded, that starting data is still there, along with the one stores data. It doesn't get removed like the others. I attempted the loadData, loadRecords methods with the option of appending the data to the current, but it yielded the same results. Here is what I am doing:</p>
  
  <pre><code>initComponent: function(){
      var aggregatedStore = new Ext.data.Store({
          data: [{'IPAddr':123.123, 'HostName': 'Peter', 'FriendlyName':'Griffan','Enabled': 1}],
          autoLoad: false,
          fields: [{name:'IPAddr'}, {name:'HostName'}, {name:'FriendlyName'},{name:'Enabled'}]
      });
  
      var accessPointsStore = new Ext.data.Store({
          model: 'App.model.Site.Bridge',
          autoLoad: true,
          listeners: {
              load: function(store, records, successful){
                  console.log(records);
                  aggregatedStore.add(records);
              }
          }
      });
  
      var accessPointControllersStore = new Ext.data.Store({
          model: 'App.model.Site.BridgeController',
          autoLoad: true,
          listeners: {
              load: function(store, records, successful){
                  console.log(records);
                  aggregatedStore.add(records);
              }
          }
      });
  
      var switchesStore = new Ext.data.Store({
          model: 'App.model.Site.Switch',
          autoLoad: true,
          listeners: {
              load: function(store, records, successful){
                  console.log(records);
                  aggregatedStore.add(records);
              }
          }
      });
  
      var routersStore = new Ext.data.Store({
          model: 'App.model.Site.Router',
          autoLoad: true,
          listeners: {
              load: function(store, records, successful){
                  console.log(records);
                  aggregatedStore.add(records);
              }
          }
      });
  
      this.items = [{
          xtype: 'devicesgrid',
          store: aggregatedStore
      }];
  
      console.log(aggregatedStore);
  
      this.callParent(arguments);
  }
  </code></pre>
  
  <p>Why isn't this working?</p>