如何在extJS网格中为行附加onfocus事件处理程序？

Question

我在extJS页面上有以下网格。

如何将onfocus或onclick事件处理程序附加到行上，以便当用户单击行时，我可以调用一个函数并向其发送行的索引或行对象本身？

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();

- Edward Tanguay

Answer 1

实际上，最好处理选择模型的事件，这样您的处理代码就可以一致地响应鼠标和键盘事件。例如：

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

- Brian Moeskau

---

我最终尝试了这段代码，它比侦听器/行单击方法更好，因为它可以在网格首次加载时以及使用箭头键向上和向下移动时工作。 - Edward Tanguay

Answer 2

在您的网格面板中，为“rowclick”事件添加一个监听器。

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

- Jason