2

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

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

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) 不可编辑，而第二列 (Age) 和第三列 (Country) 定义了编辑器。每当您使用键盘在网格中切换时，我希望跳过名称列。换句话说，我的意思是这种标签顺序：

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

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

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

4

3 回答 3

0

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

于 2013-04-15T13:32:56.587 回答
0

查看网格视图上的覆盖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');
于 2013-04-15T17:59:35.073 回答
0

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

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
    ...
})
于 2016-06-07T13:24:55.953 回答