点击监听器不工作，没有错误

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

});