app.js

Ext.onReady(function(){
  Ext.QuickTips.init();
  
  Ext.create('Ext.data.Store', {
    storeId: 'petTypes',
    fields: ['name', 'value'],
    proxy: {
      type: 'rest',
      url: '/people/pet_types',
      reader: {
        type: 'json',
        root: 'types'
      }
    },
    autoLoad: true
  });
  
  Ext.create('Ext.data.Store', {
    storeId: 'people',
    fields: ['id', 'name', 'age', 'town'],
    proxy: {
      type: 'rest',
      url: '/people',
      reader: {
        type: 'json',
        root: 'items'
      },
      writer: {
        type: 'json'
      },
      listeners: {
        exception: function( proxy, response, operation ){
          console.log(proxy, response, operation)
        }
      }
    },
    autoSync: true,
    autoLoad: true
  });

  Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('people'),
    columns: [
      { text: 'ID',  dataIndex: 'id', width: 50 },
      { text: 'Name', dataIndex: 'name', width: '25%', editor: 'textfield' },
      { text: 'Age', dataIndex: 'age', editor: 'numberfield' },
      { text: 'Town', dataIndex: 'town', flex: 1, editor: 'textfield' },
      // { text: 'Category', dataIndex: 'category', editor: {
      //     xtype: 'combobox',
      //     store: 'petTypes',
      //     displayField: 'name',
      //     valueField: 'value'
      // }},
      { xtype: 'actioncolumn', width: 30, sortable: false, menuDisabled: true, items: [{
          icon: '/images/remove.png',
          tooltip: 'Remove Person',
          scope: this,
          handler: function(grid, rowIndex) {
            var store = grid.getStore();
            var record = store.getAt(rowIndex);
            record.destroy();
          }
      }]}
    ],
    plugins: [
      Ext.create('Ext.grid.plugin.CellEditing', {
        pluginId: 'personCellEditor',
        clicksToEdit: 1
      })
    ],
    listeners: {
      viewready: function () {
        this.getView().addListener('itemadd', function (records, index, node) {
          this.ownerCt.getPlugin('personCellEditor').startEdit(index,1)
        });
      },
      edit: function(editor, e) {
        e.record.store.sync();
      }
    },
    selType: 'cellmodel',
    title: 'People',
    frame: false,
    tbar: [{
      text: 'New Record',
      scope: this,
      handler: function () {
        Ext.data.StoreManager.lookup('people').insert(0, {});
      }
    }],
    renderTo: document.body
  });
});