EXTJS 4 - 如何在通过网格使用 Tab 键但保持 Tab 键开始编辑下一个可编辑单元格时跳过单个单元格？答案

【问题标题】：EXTJS 4 - How to skip individual cells when using tab key through a grid but keep tab press start edit next editable cell?EXTJS 4 - 如何在通过网格使用 Tab 键但保持 Tab 键开始编辑下一个可编辑单元格时跳过单个单元格？
【发布时间】：2014-02-05 08:49:29
【问题描述】：

我有一个网格，具有单元格编辑和行选择模型。我使用选项卡转到下一个单元格并开始编辑它，但是有些单元格我需要跳过编辑，但是当按下一个选项卡时需要转到下一个可编辑单元格。

如果我只是从“beforeedit”事件中“return false”，它会取消整个编辑过程，所以我需要再次使用鼠标，那是错误的。

如何跳过单元格但保持制表符正常工作？

        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    beforeedit: {
                        fn: me.onCellEditingBeforeEdit,
                        scope: me
                    }
                }
            })
        ]

这里是编辑前的功能：

onCellEditingBeforeEdit: function(editor, e, eOpts) {

    var isEditable=this.isCellEditabe(editor, e); // return false if the cell is not editable

    if (!isEditable)
    {
        return false;
    }

}

【问题讨论】：

您的代码在哪里？你应该放在这里然后我们才能想到它！
我认为没有必要这样做。但我编辑了原帖。
在stackoverflow.com/questions/16016073/…查看我的回答

标签： extjs grid extjs4 tablecelleditor

【解决方案1】：

我在 .net 论坛的某个地方找到了解决方案：

Ext.selection.RowModel.override({
        onEditorTab: function(editingPlugin, e) {
           var me = this,
            view = me.views[0],
            record = editingPlugin.getActiveRecord(),
            header = editingPlugin.getActiveColumn(),
            position = view.getPosition(record, header),
            direction = e.shiftKey ? 'left' : 'right',
            columnHeader;

        // We want to continue looping while:
        // 1) We have a valid position
        // 2) There is no editor at that position
        // 3) There is an editor, but editing has been cancelled (veto event)

        do {
            position  = view.walkCells(position, direction, e, me.preventWrap);
            columnHeader = view.headerCt.items.getAt(position.column);
        } while (position && (!columnHeader.getEditor(record) || !editingPlugin.startEditByPosition(position)));
    }    
});

【讨论】：

【解决方案2】：

在您当前的网格中使用它作为配置：

var grid = Ext.create('Ext.grid.Panel', {
    ...
    selModel: Ext.create('selection.cellmodel', {
        onEditorTab: function(editingPlugin, e) {
            var me = this,
                direction = e.shiftKey ? 'left' : 'right',
                position  = me.move(direction, e);

            if (position) {
                while(!editingPlugin.startEdit(position.row, position.column)){
                    position = me.move(direction, e);

                    // go to first editable cell
                    if(!position) editingPlugin.startEdit(0, 1); // TODO: make this dynamic
                }
                me.wasEditing = false;

            } else {
                // go to first editable cell
                if (editingPlugin.startEdit(0, 1)) { // TODO: make this dynamic
                    me.wasEditing = false;
                }
            }
        },
    }),
    //selType: 'cellmodel', // remove selType
    ...
})

【讨论】：