侦听器在网格面板上不起作用-Ext JS

Question

这可能是我所缺少的非常简单的东西，但我不知道为什么我的听众在这里无法工作。

我定义了一个网格，下面带有一些列：

    ...
    {header: 'Privacy', dataIndex: 'PRIVACY_INDICATOR', flex: 3, tdCls: 'grid_cell'},
    {header: 'Lineage', dataIndex: 'popup', renderer: renderPopupIcon, flex: 1, tdCls: 'pop_cell', id: 'lineage_button',
        listeners:  {
            cellclick: function(record) {
                alert('cell has been clicked');
            }
         }
}

我已经尽力了，但似乎无法激发警惕。

有任何想法吗？

Answer 1

好的cellclick事件可用于网格而不是用于列。 您已在应将其添加到网格的列上添加了cellclick侦听器。 参见下面的示例，您可以在列的Ext Doc代码编辑器上运行它，只需复制并粘贴它，然后选择Live Preview ：

Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data:[
        {firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},
        {firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},
        {firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},
        {firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},
        {firstname:"Angela", lastname:"Martin", seniority:5, dep:"Accounting", hired:"10/21/2008"}
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        {text: 'First Name',  dataIndex:'firstname'},
        {text: 'Last Name',  dataIndex:'lastname'},
        {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},
        {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}
    ],
    listeners: {
        cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            Ext.Msg.alert('Selected Record', 'Name : ' + record.get('firstname') + ' ' + record.get('lastname'));
        }
    },
    width: 400,
    forceFit: true,
    renderTo: Ext.getBody()
});

更新：

如果只想捕获特定单元格/列的事件，则可以使用cellIndex属性，该属性是cellclick函数的参数之一。 例如：您想在用户单击“ Lineage列时显示警报，而该列是第四列，则将使用以下代码：

cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
    // if clicked on cell 4, show popup otherwise ignore
    if(cellIndex == 3) { // cellIndex starts from 0
        Ext.Msg.alert('Selected Record', 'Name : ' + record.get('firstname') + ' ' + record.get('lastname'));
    }
}

Answer 2

您正在使用哪个版本的ExtJS？ 注意，在某些版本中（肯定是4.1.1）， cellclick不会触发cellclick事件（请参阅正式文档中的注释）。 如果是这种情况，请尝试使用itemclick事件。 另一个原因可能是您正在通过

cellclick: function(record) {..

而你应该

cellclick: function(field, td, cellIndex, record, tr, rowIndex, e, eOpts) {..