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

您可以通过以下方式更新逻辑 在按下按键之前 事件!请查看以下示例!我希望这能有所帮助!

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;
                        if (targetRow >= 0 && targetRow < grid.getStore().getCount()) {
                            var targetCell = this.getView().getCellByPosition({
                                row: targetRow,
                                column: cellIndex
                            });
                            if (targetCell) {
                                var originalValue = record.get(this.columns[cellIndex].dataIndex);
                                var currentValue = editingPlugin.getActiveEditor().getValue();
                                if (originalValue !== currentValue) {
                                    editingPlugin.completeEdit(); // Complete the current edit
                                    editingPlugin.startEditByPosition({
                                        row: targetRow,
                                        column: cellIndex
                                    });
                                }
                            }
                        }
                    }
                }
            }
        }
        });