Focus a editable grid's row within the form

Question

I have a editable grid (Ext.grid.plugin.RowEditing) The grid is with in a form. The form is shown in a window

As the form is shown by showing the window, i want to focus on the first editable row's first column.

This is the method called for window's 'show' event

onWinShow : function (window, options) {

    var grid = this.down ('#myGrid');
    // focus on first field
    var rowEditStore = grid.getStore ();
    var rowEditor = grid.getPlugin ('rowEditplugin');

    rowEditor.cancelEdit ();

    var r = rowEditStore.getAt (0);
    rowEditor.startEdit (r, 1);
},

I checked the source of RowEditing and RowEditor which has the logic for focusing the field. I can see the focus appearing for a moment and then vanishing, No field in the form is focused after that.

Please suggest where have i gone wrong.

Thanks

score 0 · Accepted Answer · answered Aug 22 '12 at 15:07

The window in Extjs has the defaultFocus property that allows you to set which component should have focus when the window is opened.

If that property does not work for your needs, I would recommend encapsulating your current focus function in the Ext.Function.defer method like this and you will have to see how many milliseconds you need (test your slowest target browser or make the delay browser dependant), this will just make your focus happen after the window's default focus is done:

onWinShow : function (window, options) {
    Ext.Function.defer(function (window, options) {

        var grid = this.down ('#myGrid');
        // focus on first field
        var rowEditStore = grid.getStore ();
        var rowEditor = grid.getPlugin ('rowEditplugin');

        rowEditor.cancelEdit ();

        var r = rowEditStore.getAt (0);
        rowEditor.startEdit (r, 1);
    }, 500, this);
}

Focus a editable grid's row within the form

1 Answers1