Extjs 4 Controller grid editor change event

Question

Background

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.

Problem

I can't seem to listen the grid editors change events via 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 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.

'invoice_items_grid': {
    edit: this.addBlankInvoiceItem
},

Question How do I listen to the change event of every editor on a grid via a controller?

FoxMulder900 FoxMulder900 · Accepted Answer · 2013-05-24T16:31:02

2

votes

You have a typo there in your grid editor config

actiuon: 'update'

should be:

action: 'update'

Extjs 4 Controller grid editor change event

1 Answers