Background
I have an editable grid and a controller that controls the grid. I want to listen to the change event of all grid editors and add a new row if the grid does not have empty rows.
Problem
I don’t seem to hear how mesh editors change events through the controller. This is the code I have.
InvoiceController
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); }, });
Grid
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); }, });
I can listen to the grid edit event and add a new line, the problem with using the grid edit event is that the event fires after the editor has lost focus, and not when the contents of the editor change, this is not to create the behavior that I want.
'invoice_items_grid': { edit: this.addBlankInvoiceItem },
Question How can I listen to the change event of each editor in the grid through the controller?