Javascript ExtJS3.4：用于单元格编辑的事件侦听器

我面临着在

extjs3.4

中使用单元格编辑器触发编辑事件的问题

我试图实现在按下

'Enter'

后对编辑的单元格触发ajax调用

现在，我只是将其替换为

console.log（'hi'）

，但在我按下

'Enter'

后，它没有显示任何内容

我不确定我的代码出了什么问题。如果有人能指出，我将不胜感激。谢谢

var grid = new Ext.grid.EditorGridPanel({
    store: api_store,
    loadMask: true,
    clicksToEdit: 1,
    tbar: [{
        text: 'Create',
        handler: function () { }
    }],
    columns: [
        {
            id: 'name',
            header: 'Key Name',
            width: 300,
            sortable: true,
            dataIndex: 'name',
            editor: {
                xtype: 'textfield',
                allowBlank: false,
                listener: {
                    edit: function (el) {
                        console.log('hi');
                    }
                }
            }
        },
        {
            header: 'Key Value',
            width: 500,
            sortable: false,
            dataIndex: 'key'
        }
    ],
    sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
    viewConfig: {
        forceFit: true
    },
    height: 210,
    stripeRows: true,
    height: 350,
    title: 'Keys'
});

---

解决方案：

Ext.onReady(function () {        

        var api_store = new Ext.data.ArrayStore({
            fields: ['key', 'name'],
            data: [
                ['1', 'Name1'],
                ['2', 'Name2'],
                ['3', 'Name3']
            ]
        });


        var grid = new Ext.grid.EditorGridPanel({
            renderTo: Ext.getBody(),
            store: api_store,
            loadMask: true,
            clicksToEdit: 1,
            tbar: [{
                text: 'Create',
                handler: function () { }
            }],
            listeners: {
                afteredit: function(e) {
                    console.log('After edit. Column: ' + e.field);
                }
            },
            columns: [
                {
                    id: 'name',
                    header: 'Key Name',
                    width: 300,
                    sortable: true,
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                {
                    header: 'Key Value',
                    width: 500,
                    sortable: false,
                    dataIndex: 'key'
                }
            ],
            sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
            viewConfig: {
                forceFit: true
            },
            height: 210,
            stripeRows: true,
            height: 350,
            title: 'Keys'
        });     

});

编辑事件后使用EditorGridPanel

后编辑（e）

在编辑单元格后激发。编辑事件对象具有以下特性
性质


网格-此网格
记录-正在编辑的记录
字段-正在编辑的字段名
值-正在设置的值
originalValue—编辑前字段的原始值
行-网格行索引
column—网格列索引

参数：

e：对象一个编辑事件（参见上面的描述）

示例：

Ext.onReady(function () {        

        var api_store = new Ext.data.ArrayStore({
            fields: ['key', 'name'],
            data: [
                ['1', 'Name1'],
                ['2', 'Name2'],
                ['3', 'Name3']
            ]
        });


        var grid = new Ext.grid.EditorGridPanel({
            renderTo: Ext.getBody(),
            store: api_store,
            loadMask: true,
            clicksToEdit: 1,
            tbar: [{
                text: 'Create',
                handler: function () { }
            }],
            listeners: {
                afteredit: function(e) {
                    console.log('After edit. Column: ' + e.field);
                }
            },
            columns: [
                {
                    id: 'name',
                    header: 'Key Name',
                    width: 300,
                    sortable: true,
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                {
                    header: 'Key Value',
                    width: 500,
                    sortable: false,
                    dataIndex: 'key'
                }
            ],
            sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
            viewConfig: {
                forceFit: true
            },
            height: 210,
            stripeRows: true,
            height: 350,
            title: 'Keys'
        });     

});

解决方案：

Ext.onReady(function () {        

        var api_store = new Ext.data.ArrayStore({
            fields: ['key', 'name'],
            data: [
                ['1', 'Name1'],
                ['2', 'Name2'],
                ['3', 'Name3']
            ]
        });


        var grid = new Ext.grid.EditorGridPanel({
            renderTo: Ext.getBody(),
            store: api_store,
            loadMask: true,
            clicksToEdit: 1,
            tbar: [{
                text: 'Create',
                handler: function () { }
            }],
            listeners: {
                afteredit: function(e) {
                    console.log('After edit. Column: ' + e.field);
                }
            },
            columns: [
                {
                    id: 'name',
                    header: 'Key Name',
                    width: 300,
                    sortable: true,
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                {
                    header: 'Key Value',
                    width: 500,
                    sortable: false,
                    dataIndex: 'key'
                }
            ],
            sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
            viewConfig: {
                forceFit: true
            },
            height: 210,
            stripeRows: true,
            height: 350,
            title: 'Keys'
        });     

});

编辑事件后使用EditorGridPanel

后编辑（e）

在编辑单元格后激发。编辑事件对象具有以下特性
性质


网格-此网格
记录-正在编辑的记录
字段-正在编辑的字段名
值-正在设置的值
originalValue—编辑前字段的原始值
行-网格行索引
column—网格列索引

参数：

e：对象一个编辑事件（参见上面的描述）

示例：

Ext.onReady(function () {        

        var api_store = new Ext.data.ArrayStore({
            fields: ['key', 'name'],
            data: [
                ['1', 'Name1'],
                ['2', 'Name2'],
                ['3', 'Name3']
            ]
        });


        var grid = new Ext.grid.EditorGridPanel({
            renderTo: Ext.getBody(),
            store: api_store,
            loadMask: true,
            clicksToEdit: 1,
            tbar: [{
                text: 'Create',
                handler: function () { }
            }],
            listeners: {
                afteredit: function(e) {
                    console.log('After edit. Column: ' + e.field);
                }
            },
            columns: [
                {
                    id: 'name',
                    header: 'Key Name',
                    width: 300,
                    sortable: true,
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                },
                {
                    header: 'Key Value',
                    width: 500,
                    sortable: false,
                    dataIndex: 'key'
                }
            ],
            sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
            viewConfig: {
                forceFit: true
            },
            height: 210,
            stripeRows: true,
            height: 350,
            title: 'Keys'
        });     

});