title: Sencha ExtJS RESTful grid example confusion
body: <p>I am very confused by the Sencha documentation for ExtJS. The documentation begins with a Getting Started guide which highlights and illustrates the importance on a suitable structure for the classes and source code of your application. But the provided examples then break all the conventions laid down by the Getting Started guide. Instead of code being broken down into appropriate Model, Store, View, etc. class files the examples are provided as a single file with example source code which is not easily re-usable in separate source files.</p>
  
  <p>I started by following the Portal example (<a href="http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html" rel="nofollow">http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html</a>) as this is the sort of application I want to create. I wanted to enhance the Portal example and add in a screen which would display a grid and use a RESTful web service as the data backend. I have created the backend I just want to create the front-end. So I looked at the RESTful example (<a href="http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html" rel="nofollow">http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html</a>)</p>
  
  <p>I have tried to copy the RESTful example into the recommended pattern of seperate classes e.g. Model, Store, View:</p>
  
  <p>Model:</p>
  
  <pre><code>Ext.define('MyLodge.model.Member', {
      extend: 'Ext.data.Model',
      fields: [
          {name: 'name',       type: 'string'},
          {name: 'email',      type: 'string'},
          {name: 'href',       type: 'string'}
      ]
  });
  </code></pre>
  
  <p>Store:</p>
  
  <pre><code>Ext.require('MyLodge.model.Member');
  
  Ext.define('MyLodge.store.Members', {
      autoLoad: true,
      autoSync: true,
      model: 'MyLodge.model.Member',
      proxy: {
          type: 'rest',
          url: 'http://localhost:8888/rest/memberapi/members' ,
          reader: {
              type: 'json',
              root: 'data'
          },
          writer: {
              type: 'json'
          }
      },
      listeners: {
          write: function(store, operation){
              var record = operation.getRecords()[0],
                  name = Ext.String.capitalize(operation.action),
                  verb;
  
  
              if (name == 'Destroy' ) {
                  record = operation.records[0];
                  verb = 'Destroyed';
              } else {
                  verb = name + 'd';
              }
              Ext.example.msg(name, Ext.String.format( "{0} member: {1}", verb, record.getId()));
  
          }
      }
  });
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>Ext.define('MyLodge.view.content.MemberGrid', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.membergrid',
  
      initComponent: function(){
  
          var store = Ext.create('MyLodge.store.Members' );
  
          Ext.apply( this, {
              height: this.height,
              store: store,
              stripeRows: true,
              columnLines: true,
              columns: [{
                  id       : 'name',
                  text   : 'Name',
                  flex: 1,
                  sortable : true,
                  dataIndex: 'name'
              },{
                  text   : 'E-Mail',
                  width    : 150,
                  sortable : true,
                  dataIndex: 'email'
              },{
                  text   : 'Href',
                  width    : 200,
                  sortable : true,
                  dataIndex: 'href'
              }],
              dockedItems: [{
                  xtype: 'toolbar',
                  items: [{
                      text: 'Add',
                      iconCls: 'icon-add',
                      handler: function(){
                          // empty record
                          store.insert(0, new MyLodge.model.Member());
                          rowEditing.startEdit(0, 0);
                      }
                  }, '-', {
                      itemId: 'delete',
                      text: 'Delete',
                      iconCls: 'icon-delete',
                      disabled: true,
                      handler: function(){
                          var selection = grid.getView().getSelectionModel().getSelection()[0];
                          if (selection) {
                              store.remove(selection);
                          }
                      }
                  }]
              }]
          });
  
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>But I am not sure where to put the code to control the grid row selection and enable the Delete button:</p>
  
  <pre><code>grid.getSelectionModel().on('selectionchange', function(selModel, selections){
      grid.down('#delete').setDisabled(selections.length === 0);
  });
  </code></pre>
  
  <p>Also when I press the Add button I get the following error:</p>
  
  <pre><code>Uncaught TypeError: Object [object Object] has no method 'insert'.
  </code></pre>
  
  <p>Any help would be appreciated.</p>