title: Extjs 4 Controller grid editor change event
body: <p><strong>Background</strong></p>
  
  <p>I have an editable grid, and a Controller that manages the grid. I want to listen to the change event of all the grid editors and add a new row if the grid doesn't have any blank rows.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>I can't seem to listen the grid editors change events via the Controller. This is the code I have.</p>
  
  <p><strong>InvoiceController</strong></p>
  
  <pre><code>Ext.define('MyApp.controller.InvoiceController', {
      extend: 'Ext.app.Controller',
  
      models: [
          'Invoice',
          'InvoiceItem'
      ],
      stores: [
          'Invoice',
          'InvoiceItem'
      ],
      views: [
          'InvoiceForm',
          'InvoiceItemsGrid',
      ],
  
      init: function(application) {
  
          this.control({
              '[action=update]': {
                  change: this.addBlankInvoiceItem,
                  scope: this
              },
          });
      },
  
      //...
  
      addBlankInvoiceItem: function(btn) {
          var store = this.getStore("InvoiceItem");
          var grid = this.getView('InvoiceItemsGrid');
  
          var invoice_item = new MyApp.model.InvoiceItem({
              "invoice_id" : invoice_id
          });
  
          var insert_point = store.getCount();//insert at end of grid
          store.insert(insert_point, invoice_item);
      },
  
  });
  </code></pre>
  
  <p><strong>Grid</strong></p>
  
  <pre><code>Ext.define('MyApp.view.InvoiceItemsGrid', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.invoice_items_grid',
  
      requires: [
          'MyApp.view.ProductCombo',
          'MyApp.view.AccountCombo',
          'MyApp.view.TaxRateCombo'
      ],
  
      frame: true,
      bodyBorder: true,
      title: 'Invoice Items',
      columnLines: true,
      forceFit: true,
      store: 'InvoiceItem',
  
      initComponent: function() {
          var me = this;
  
          Ext.applyIf(me, {
              columns: [
                //...
                  {
                      xtype: 'gridcolumn',
                      maxWidth: 100,
                      minWidth: 80,
                      width: 100,
                      dataIndex: 'product_id',
                      text: 'Product ID',
                      editor: {
                          xtype: 'product_combo',
                          actiuon: 'update'
                      }
                  }
                  //...
              ],
              viewConfig: {
                  plugins: [
                      Ext.create('Ext.grid.plugin.DragDrop', {
  
                      })
                  ]
              },
              plugins: [
                  Ext.create('Ext.grid.plugin.CellEditing', {
                      clicksToEdit: 1
                  })
              ]
          });
  
          me.callParent(arguments);
      },
  
  });
  </code></pre>
  
  <p>I am able to listen to the grid's Edit event and add the new row, the problem with using the grid edit event is that the event fires off after the editor has lost focus not when the editors content changes, this doesn't produce the behaviour I want.</p>
  
  <pre><code>'invoice_items_grid': {
      edit: this.addBlankInvoiceItem
  },
  </code></pre>
  
  <p><strong>Question</strong>
  How do I listen to the change event of every editor on a grid via a controller?</p>