EXTJS 单元格编辑使用向上和向下箭头键可递增和递减值

Question

在我的应用程序中，当我尝试编辑文本框单元格并按向上箭头或向下箭头时，它会自动递增或递减单元格的值。

预期行为：当我编辑单元格并更改值并按向上或向下箭头时，它的行为应该就像我按 Enter 键一样，并且应该向上或向下移动到单元格。

我们是否有任何关键字可以用来调试代码并查看是什么使值递增或递减。预先感谢。

Answer 1

您可以通过设置 keyNavEnabled: false 并使用 beforecellkeydown 事件更新逻辑来实现此目的！请检查下面的例子！我希望这有帮助！

Ext.application({
    name: 'Grid App',
    launch: function () {
        Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 200,
            title: 'Editable Grid Example',
            store: {
                fields: ['name', 'age'],
                data: [{
                    name: 'John',
                    age: 25
                }, {
                    name: 'Jane',
                    age: 30
                }, {
                    name: 'Mike',
                    age: 28
                }]
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: 'textfield'
            }, {
                text: 'Age',
                dataIndex: 'age',
                editor: {
                    xtype: 'numberfield',
                    keyNavEnabled: false,
                }
            }],
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1,
                id: 'celledit'
            },
            listeners: {
                beforecellkeydown: function (grid, td, cellIndex, record, tr, rowIndex, event, eOpts) {
                    if (event.getKey() === event.UP || event.getKey() === event.DOWN) {
                        var editingPlugin = this.getPlugin('celledit');
                        if (editingPlugin.editing) {
                            event.stopEvent();
                            var targetRow = event.getKey() === event.UP ? rowIndex - 1 : rowIndex + 1;
                            var targetCell = this.getView().getCellByPosition({
                                row: targetRow,
                                column: cellIndex
                            });
                            if (targetCell) {
                                editingPlugin.completeEdit(); // Complete the current edit
                                editingPlugin.startEditByPosition({
                                    row: targetRow,
                                    column: cellIndex
                                });
                            }
                        }
                    }
                }
            }
        });
    }
});