在 Ext 网格中切换时如何跳过特定的单元格？

Posted 2023-02-26

【中文标题】在 Ext 网格中切换时如何跳过特定的单元格？

【英文标题】：How to skip over particular cells when tabbing through an Ext grid?

【发布时间】：2013-04-15 13:12:41

【问题描述】：

我有一个网格面板，其中一些单元格是可编辑的，而另一些则不是。我想这样当你用键盘在网格中切换时，不可编辑的单元格会被跳过，即永远不会被选中。

到目前为止，这是我的简单网格：

var store = Ext.create('Ext.data.Store', 
    fields:['name', 'age', 'country'],
    data:[
        name:'Lisa', age:13, country: 'USA',
        name:'Bart', age:75, country: 'France',
        name:'Homer', age:32, country: 'Germany',
        name:'Marge', age:56, country: 'Australia'
    ]
);

var grid = Ext.create('Ext.grid.Panel', 
    title: 'People',
    store: store,
    columns: [
        header: 'Name',  dataIndex: 'name', flex: 1,
        header: 'Age',  dataIndex: 'age', flex: 1, editor: 'numberfield',
        header: 'Country',  dataIndex: 'country', flex: 1, editor: 'textfield',
    ],
    selType: 'cellmodel',
    plugins: [
        ptype: 'cellediting',
        clicksToEdit: 2
    ],
    height: 150,
    width: 200,
    renderTo: Ext.getBody()
);

如您所见，第一列（姓名）不可编辑，而第二列（年龄）和第三列（国家/地区）定义了编辑器。每当您使用键盘在网格中切换时，我都希望跳过 Name 列。换句话说，我的意思是这种跳格顺序：

  COL1  |   COL2  |   COL3  |
-----------------------------
  SKIP  |    1    |    2    |
-----------------------------
  SKIP  |    3    |    4    |
-----------------------------
  SKIP  |    5    |    6    |
-----------------------------

我不知道在哪里可以注入这种自定义选项卡行为，但我无法想象这是不可能的。

这是我的代码的 JS 小提琴：http://jsfiddle.net/qnXrp/

【问题讨论】：

我现在也有同样的担忧，因为客户想要跳过某些列。您找到正确的解决方案了吗？如果你找到了，请分享。谢谢。

【参考方案1】：

只需从配置中删除 selType: "cellmodel"。然后它将默认为 rowmodel，并且可以在行中选择的唯一内容是可编辑单元格。

【讨论】：

抱歉，我需要一次直观地显示每个单元格被单独选择。不过，感谢您的回答。

【参考方案2】：

查看在网格视图上覆盖 walkCells。

这是一种在通过网格单元格切换时跳过第一列的非常老套的方法：

Ext.ComponentManager.create(
    viewConfig: 
        xhooks: 
            walkCells: function(pos, direction, e, preventWrap, verifierFn, scope) 
                return this.callParent([pos, direction, e, preventWrap, function(newPos) 
                    var newerPos = false;
                    if (newPos.column !== 0) 
                        return true;
                    
                    newerPos = this.walkCells(newPos, direction, e, preventWrap);
                    if (newerPos) 
                        Ext.apply(newPos, newerPos);
                        return true;
                    
                    return false;
                , this]);
            
        
    
 , 'grid'); 

【参考方案3】：

我找到了解决问题的方法，所以我在这里分享。尝试将其用作当前网格中的配置：

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
    ...
)