Question

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

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

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

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

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

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

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

Answer 1

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

Answer 2

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

这是一种在通过网格单元格跳过时跳过第一列的真正hacky方法：

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');

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

如何通过Ext网格跳过特定单元格？

3 个答案: