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列并且该列为第4列时显示提醒，您将使用以下代码：

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事件根本没有被触发（参见offical documentation中的注释）。如果是这种情况，请尝试使用itemclick事件。另一个原因可能是您正在使用

捕捉此事件

cellclick: function(record) {..

你应该用

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

监听器不在Grid Panel上工作 - Ext JS

2 个答案:

更新：