After loading store, select and show specific row in grid works in Chrome, not in IE

Question

I suppose I must be doing something wrong here. I have a GridPanel which gets its data from a Store. The store has a listener on the load event, which selects row 8 of the grid's selection model and tries to bring it into focus.

In Chrome (currently version 33) this works and the specified record is visible. In IE (version 11) this does not work. At the time of the alert('pause'); statement, the grid is visible with the specified row visible. But after clicking away the alert message, the grid seems to be doing something, cause after that it just show the first few rows.

Ext.onReady(function() {
    Ext.QuickTips.init();

    // create the data store
    var store = new Ext.data.JsonStore({
        autoDestroy: true,
        proxy: new Ext.data.HttpProxy({url: "/Home/PersonList", method: "POST"}),
        fields: ["First", "Last", "Company", "Email"],
        autoLoad: true,
        listeners: {
            load: function(s, r, o) {
                console.log('store loaded');
                grid.getSelectionModel().selectRow(8);
                grid.getView().focusRow(8);
                alert('pause');
            }
        }
    });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        id: 'grid',
        columns: [{header: 'Company', dataIndex: 'Company'},
            {header: 'First name', dataIndex: 'First'},
            {header: 'Last name', dataIndex: 'Last'},
            {header: 'Email',dataIndex: 'Email'}
        ],
        height: 150,
        listeners: {
            'render': function(component) {
                console.log('grid rendered');
            }
        }
    });

    // render the grid to the specified div in the page
    grid.render(document.body);
});

You can't just run this code if you don't have a /Home/PersonList-url that returns some Json-data. I don't know if/how I can change the sample to be a complete piece of code (while still having the store autoload the data.

Answer 1

The problem here is the asynchronous nature of the operations you are performing. There are two operations taking place at the same time here

• Store load operation
• Grid rendering

Your code attempts to select the 8th row from the grid after the store load event. But there is not guarantee that the grid has been rendered before the store loading operation have finished since the store has the autoLoad configuration value set to true. The reason this code works on Chrome and not on IE is because Chrome JavaScript engine is 10 times faster than IE 9 (IE 10 and 11 engines are also notoriously faster than IE 9) so your UI gets rendered before your loading operation gets finished. However this is just a matter of luck on having the sequence of events being triggered in the right order, to avoid this problem you should check the current store loading status after the UI has been rendered, and if it still loading you should deffer the select operation until the store has been loaded, something like:

// create the Grid
var grid = new Ext.grid.GridPanel({
    store: store,
    id: 'grid',
    columns: [{
        header: 'Company',
        dataIndex: 'Company'
    }, {
        header: 'First name',
        dataIndex: 'First'
    }, {
        header: 'Last name',
        dataIndex: 'Last'
    }, {
        header: 'Email',
        dataIndex: 'Email'
    }],
    height: 150,
    listeners: {
        'render': function(component) {
            // Get sure that the store is not loading and that it 
            // has at least a record on it
            if (grid.store.isLoading() || grid.store.getCount() == 0) {
                // If it is still pending attach a listener to load
                // event for a single time to handle the selection
                // after the store has been loaded
                grid.store.on('load', function() {
                    grid.getView().getSelectionModel().select(0);
                    grid.getView().focusRow(0);
                }, this, {
                    single: true
                });
            } else {
                grid.getView().getSelectionModel().select(0);
                grid.getView().focusRow(0);
            }

        }
    }
});

You can see a full working example based on your code here. Hope this helps.