javascript - 监听器不在网格面板上工作 - 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 列并且该列是第 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'));
    }
}