ExtJS GridPanel Row Click

Question

I have designed an ExtJS GridPanel and populated data from a database. My requirement is when clicking on a grid row (like edit button) get an id from the grid and populate a window with specific data (retrive data using id from database). How can i achieve this?

Answer 1

Use this:

            grid.on('rowclick', function(grid, rowIndex, columnIndex, e) {
                console.log(grid, rowIndex, columnIndex, e);
            }, this);

Edit: Refer ExtJS Grid FAQ section for Grid related issues

Answer 2

Add it in grid's Listener:

listeners: {
    cellclick: function (grd, rowIndex, colIndex, e) {
       var record = grd.getStore().getAt(rowIndex);
       var record = grd.getStore().getAt(rowIndex);
    }
}

Answer 3

Take a look at this example from Ext JS 3.3 Examples, it features similar mechanics to what you have described. The main source code can be seen here.

The other official Grid-related examples (data binding etc.) are probably worth a look as well.