Extjs 4控制器网格编辑器更改事件

2023年12月18日 173次阅读

背景

我有一个可编辑的网格,以及一个管理网格的Controller.我想听所有网格编辑器的更改事件,如果网格没有任何空行,则添加新行.

问题

我似乎无法通过Controller监听网格编辑器更改事件.这是我的代码.

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);
    },

});

格

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);
    },

});

我能够收听网格的Edit事件并添加新行,使用网格编辑事件的问题是,在编辑器失去焦点后事件会在编辑器内容发生变化时触发,这不会产生行为我想要.

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

题
如何通过控制器收听网格上每个编辑器的更改事件？

最佳答案 你的网格编辑器配置中有一个拼写错误

actiuon: 'update'

应该：

action: 'update'
点赞