ExtJS 4 grid focus plus navigation

Question

I need to develop a grid wrapped into a floatable window: when the window is shown I need to focus on a certain row and then I've to move up or down with the nav keys. Now, I understand how to focus the specified row (with grid.getView().focusRow(index)) but, done that, I'm not able to move up or down through the grid, as if the grid had lost the focus.

Here's the code:

var storage = Ext.create ('Ext.data.Store', {
    fields: ['id', 'name'] ,
    data: [
        {id:0,name:'foo'} ,
        {id:1,name:'boo'} ,
        {id:2,name:'koo'} ,
        {id:3,name:'zoo'} ,
        {id:4,name:'moo'} ,
        {id:5,name:'too'} ,
        {id:6,name:'goo'} ,
        {id:7,name:'poo'} ,
        {id:8,name:'loo'} ,
        {id:9,name:'roo'} ,
        {id:10,name:'hoo'}
    ]
});

Ext.create ('Ext.grid.Panel', {
    title: 'My Grid' ,
    width: 300 ,
    height: 200 ,
    store: storage ,
    renderTo: Ext.getBody () ,

    columns: [{
        header: 'ID' ,
        dataIndex: 'id'
    } , {
        header: 'Name' ,
        dataIndex: 'name' ,
        flex: 1
    }] ,

    listeners: {
        afterlayout: function (grid) {
            var view = grid.getView ();

            view.focusRow (storage.getCount () - 1);
            view.highlightItem (view.getNode (storage.getCount () - 1));
        }
    }
});

So, after that, how can I 'focus' the grid to get it navigable?

Answer 1

You need to select the row like this for it to be keyboard navigable:

grid.getView().focus();
grid.getSelectionModel().select(0); // or whatever the row index is

And do it in a viewready event listener. That is what the viewready event is for.

Obviously the grid would need at least one record for this to work without errors, you should check for that condition first.