title: ExtJS grid with empty store, on add/insert only shows the latest record added
body: <p>I have a grid that on load is empty and I want to populate based on a button click. </p>
  
  <p>If the store has some data in to begin with (config), the new records are added and displayed in the grid no problem. </p>
  
  <p>However, if I let the grid with no data in the begining, when adding new records, the store count is reflecting the additions but the grid only ever displays the latest added record.</p>
  
  <p>Any suggestion of where to look would be greatly appreciated. Thank you.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var srGrid = new Ext.grid.GridPanel({
      id: 'srGrid',
      title: 'Scheduled For',
      x: 230,
      y: 40,
      width: 200,
      store: new Ext.data.ArrayStore({
          fields: ['index', 'date'],
          idIndex: 0,
          autoLoad: false
      }),
      columns: [
          {dataIndex: 'date', id: 'srCol', width: 196, menuDisabled: true}
      ],
      listeners: {
          beforeshow: function() {
              //this.store.removeAll();
          }
      }
  });
  
  var srCustomContentPanel = new Ext.Panel({
      id: 'srCustomScheduleContent',
      border: false,
      layout: 'absolute',
      items: [
          srGrid,
          {
              xtype: 'button',
              id: 'addButton',
              text: 'Add to Scheduled',
              handler: function() {
                  var idx = srGrid.store.getCount()+1;
                  var newData = {
                      index: idx,
                      date: 'tomorrow'+idx
                  };
                  //var recId = 3; // provide unique id
                  var p = new srGrid.store.recordType(newData, idx); // create new record
                  console.log(p);
                  srGrid.store.insert(0, p); 
              },
              x: 10,
              y: 250
          },
      ]}
  );
  </code></pre>