在 Ext 网格中切换时如何跳过特定的单元格? [英] How to skip over particular cells when tabbing through an Ext grid?

问题描述

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

I have a grid panel where some cells are editable, and others aren't. I'd like to make it so that when you tab through the grid with your keyboard, the non-editable cells are skipped over i.e. never get selected.

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

Here's my simple grid so far:

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()
});

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

As you can see, the first column (Name) is not editable, where as the second (Age) and third (Country) have editors defined. I'd like the Name column to be skipped over whenever you tab through the grid with your keyboard. In other words, I mean this kind of tab order:

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

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

I have no idea where I can inject this kind of custom tabbing behaviour, but I can't imagine it is impossible to do.

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

Here's a JS fiddle of my code: http://jsfiddle.net/qnXrp/

推荐答案

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

i found a solution to my problem so i'm sharing it here. try to use this as config in your current grid:

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

这篇关于在 Ext 网格中切换时如何跳过特定的单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！