How to skip over particular cells when tabbing through an Ext grid?

Question

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/

Answer 1

Just remove selType: "cellmodel" from the config. It will then default to rowmodel and the only thing that can be selected in the row are editable cells.

Answer 2

Look into overriding walkCells on the grid view.

Here's a really hacky way to skip the first column when tabbing through grid cells:

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

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