当通过Ext网格进行分页时，如何跳过特定的单元格？ [英] How to skip over particular cells when tabbing through an Ext grid?

问题描述

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

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

  var store = Ext.create（'Ext.data.Store'，{
 fields： ['name'，'age'，'country']，
 data：[
 {name：'Lisa'，age：13，country：'USA'}，
 {name： 'Bart'，年龄：75，国家：'法国'}，
 {名称：'荷马'，年龄：32，国家：'德国'}，
 {名称：'Marge'，年龄： 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 ）和第三（国家）有编辑者定义。当您通过键盘标记通过网格时，我希望可以跳过名称列。换句话说，我的意思是这种标签顺序：

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

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

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

解决方案

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

  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）; 
 
 //转到第一个可编辑单元格
 if（ ！position）editingPlugin.startEdit（0，1）; // TODO：使这个动态
} 
 me.wasEditing = false; 
 
} else {
 / /转到第一个可编辑单元格
 if（editingPlugin.startEdit（0，1））{// TODO：使这个动态
 me.wasEditing = false; 
} 
} 
}，
}），
 // selType：'cellmodel'，// remove selType 
 ... 
 }）
  

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.

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屋！