单击listener not working not errors

Question

我正在尝试使用以下代码处理网格单元格上的click事件：

{
    xtype : 'clearstoregrid',
    name : 'controlGrid',
    hidden : this.hideControlGrid,
    layout : 'fit',
    store : 'ItemsStore',
    columns : [ {
        text : 'Items',
        dataIndex : 'name',
        sortable : false,
        flex : 6,
        listeners: {
            'cellclick': function(iView, iCellEl, iColIdx, iStore, iRowEl, iRowIdx, iEvent) {
                alert('cellclick');
            }
        }
    }

但当我单击该单元格时，什么也没有发生。在浏览器控制台中，我没有错误。

我使用的是ExtJS 4.2。

Answer 1

您需要实现网格的cellclick事件(当然，我假设'clearstoregrid'继承Ext.grid.Panel)。网格列(Ext.grid.column.Column)没有cellclick事件。

{
    xtype : 'clearstoregrid',
    name : 'controlGrid',
    hidden : this.hideControlGrid,
    layout : 'fit',
    store : 'ItemsStore',
    columns : [ 
        {
        text : 'Items',
        dataIndex : 'name',
        sortable : false,
        flex : 6
        }
    ],
    listeners: {
        'cellclick': function(iView, iCellEl, iColIdx, iStore, iRowEl, iRowIdx, iEvent) {
            alert('cellclick');
        }
    }
}

ExtJS 4.2的示例：

Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.FocusManager.enable();

    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'name'],
        data : [
            {"id": 1, "name": "AA name"},
            {"id": 2, "name": "BA name"},
            {"id": 3, "name": "AB name"},
            {"id": 4, "name": "BB name"},
            {"id": 5, "name": "AC name"},
            {"id": 6, "name": "BC name"},
            {"id": 7, "name": "AD name"},
            {"id": 8, "name": "BD name"},
            {"id": 9, "name": "AE name"}
        ]
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [
            {
            text: 'ID',  
            dataIndex: 'id'
            },
            {
            text: 'Name',  
            dataIndex: 'name'
            }
        ],
        listeners: {
            'cellclick': function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
                alert('cellclick');
            }
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

});