代码之家 › 专栏 › 技术社区 › Edward Tanguay

如何将onfocus事件处理程序附加到extJS网格中的行?

grid event-handling extjs

4

Edward Tanguay · 技术社区 · 15 年前

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

将onfocus或onclick事件处理程序附加到行的语法是什么,以便当用户单击行时,我可以调用一个函数,将行的索引或行对象本身发送给它?

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

2 回复 | 直到 15 年前

1

5

Brian Moeskau 15 年前

实际上,处理选择模型的事件通常更好,这样处理代码将一致地响应鼠标和键盘事件。例如。,

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

2

3

Jason 15 年前

在网格面板中,为“rowclick”事件添加侦听器。

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