Programmatically selecting grid row does not fire itemclick event in ExtJS4

Question

I am building an ExtJS4 Web Application and I have a "page" where I have a Grid whose records come from a database. After loading the store of the grid, I want the first item to be selected.

This is what I've tried so far:

store.load({
    callback: function() {
        if(store.count() > 0){
            grid.getSelectionModel().select(0);
          //grid.getView().select(0);
        }
    }
});

The store loads the database records properly as they're shown in my grid. The first row is also highlighted as if it was clicked. However, my listener/controller for the itemclick event isn't firing as opposed to when I manually click the row.

I've also tried grid.getView().select(0); as well as grid.getSelectionModel().selectFirstRow(); but apparently, both those aren't functions.

My grid row appears to be selected by the itemclick function isn't being called at all.

It's the expected behaviour. itemclick is for when the row is clicked. If you want to listen for a row being selected, listen to the selection events. — Evan Trimboli

Kohei Mikami Kohei Mikami · Accepted Answer · 2016-01-08T01:42:44

You should use 'selectionchange' listener in 'Ext.selection.Model' instead of 'itemclick' in grid class. This listener will be fired in both cases when rows are clicked in grid and rows are selected programmatically.

Probably the code will be like this:

Ext.create('Ext.grid.Panel', {
    selModel: Ext.create('Ext.selection.Model', {
        ...
        listeners: {
           selectionchange: function( this, selected, eOpts ) {
               // Write your listener here or fire another event in view controller
           }
        }
    }
    store: ...
});

Programmatically selecting grid row does not fire itemclick event in ExtJS4

1 Answers