title: ExtJs 5 grid store/viewmodel binding: Cannot modify ext-empty-store
body: <p>I'm pulling my hair out on this one...</p>
  
  <p>I have a view with some grids, a store and a viewModel. I need different filtered versions of the store in different grids, so I'm trying to bind each filtered store to a grid. Now I can't even get a store to load in a grid in the first place... </p>
  
  <p>Here's what my code looks like:</p>
  
  <p><strong>Store:</strong></p>
  
  <pre><code>Ext.define('My.store.Admin.Kinder', {
      extend: 'Ext.data.Store',
      model: 'My.model.Kind',
      storeId: 'adminKinderStore',
      alias: 'store.adminKinder',
      proxy: {
          type: 'ajax',
          method: 'post',
          url: '/getKinder',
          reader: {
              type: 'json',
              rootProperty: 'kinder'
          }
      }
  });
  </code></pre>
  
  <p><strong>ViewModel:</strong></p>
  
  <pre><code>Ext.define('My.model.kindViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.kindViewModel',
      requires: [
          'My.model.Kind',
          'My.store.Admin.Kinder'
      ],
      view: 'kindView',
      stores: {
          warteliste: {
              type: 'adminKinder'
          }
      }
  });
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>Ext.define('My.view.Admin.kinder', {
      extend: 'Ext.panel.Panel',
      alias: 'widget.kindView',
      id: 'kinder-panel',
      requires: [
          'My.view.Admin.kindController',
          'My.model.kindViewModel'
      ],
      controller: 'kind',
      border: false,
      maxWidth: 960,
      session: My.session,
      viewModel: {
          type: 'kindViewModel'    
      },    
      initComponent: function() {
          this.activeTab = 'warteliste-tab';
          this.callParent();
      },
      items: [
      {
          xtype: 'grid',
          id: 'warteliste-grid',
          bind: {
              store: '{warteliste}'
          },              
          border: false,
          margin: '0 0 20px 0',
          selModel: {
              allowDeselect: true
          },
          columns: [
              // some grid columns
          ],
          listeners: {
              afterRender: function(grid) {
                  grid.store.load();
              }
          }
      }]
  });
  </code></pre>
  
  <p>I get an error message "Cannot modify ext-empty-store", which must mean that the store is not (yet) bound when store.load() is called in the afterRender listener.
  Strange thing is, when I console.log the grid, the store is there. When I console.log grid.store, an empty store is returned.</p>