CODEWITHSUNDEEP
extjsevent-handlinggrid
Edward Tanguay
Edward Tanguay

Reputation: 193302

How can I attach an onfocus event handler to a row in an extJS grid?

I have the following grid on an extJS page.

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

alt text

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: 'Y-m-d 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('Y-m-d H:i:s'),
        dataIndex: 'lastChange'
    }],
    viewConfig: {
        forceFit: true
    },
    renderTo: 'content',
    title: 'Computer Information',
    width: 500,
    autoHeight: true,
    frame: true
});

grid.getSelectionModel().selectFirstRow();

Upvotes: 4

Views: 1931

Answers (2)

Brian Moeskau
Brian Moeskau

Reputation: 20419

Actually you are usually better off handling the selection model's events so that your handling code will respond to both mouse and keyboard events consistently. E.g.,

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

Upvotes: 5

Jason
Jason

Reputation: 1183

In your grid panel, add an listener for the 'rowclick' event.

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

Upvotes: 3

Related Questions