How can I bind an onfocus event handler to a string in an extJS grid?

Question

I have the following grid on an extJS page.

What is the syntax for binding an onfocus or onclick handler to a string, so when a user clicks on a string, can I call a function by sending it the index of the string or the string object itself?

var myData = [['Computer1', 29.89, 0.24, 0.81, '2010-11-17 08:31:12'], ['Computer2', 83.81, 0.28, 0.34, '2010-11-14 08:31:12'], ['Network1', 71.72, 0.02, 0.03, '2010-11-12 08:31:12'], ['Network2', 52.55, 0.01, 0.02, '2010-11-11 08:31:12'], ['Other', 29.01, 0.42, 1.47, '2010-11-04 08:31:12']]; var myReader = new Ext.data.ArrayReader({}, [{ name: 'object' }, { name: 'Number of Connections', type: 'float' }, { name: 'status', type: 'float' }, { name: 'rank', type: 'float' }, { name: 'lastChange', type: 'date', dateFormat: 'Ymd H:i:s' }]); var grid = new Ext.grid.GridPanel({ style: 'margin-top: 10px', store: new Ext.data.Store({ data: myData, reader: myReader }), columns: [{ header: 'Object', width: 120, sortable: true, dataIndex: 'object' }, { header: 'Status', width: 90, sortable: true, dataIndex: 'status' }, { header: 'Rank', width: 90, sortable: true, dataIndex: 'rank' }, { header: 'Last Updated', width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('Ymd H:i:s'), dataIndex: 'lastChange' }], viewConfig: { forceFit: true }, renderTo: 'content', title: 'Computer Information', width: 500, autoHeight: true, frame: true }); grid.getSelectionModel().selectFirstRow(); 

Answer 1

In fact, it’s usually better for you to control the events of the selection model so that your processing code responds to both mouse events and the keyboard. For instance.

 grid.getSelectionModel().on('rowselect', function(sm, idx, rec){ alert(idx); //row index }); 

Answer 2

In the grid panel, add a listener for the rowclick event.

 listeners: { 'rowclick': function(grid, index) { // do whatever } }