This is probably something incredibly simple I'm missing, but I can't figure out why my listener won't work here.

I've defined a grid with a few colums below:

    ...
    {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');
            }
         }
}

I have tried everything, but I can't seem to get the alert to fire.

Any ideas?

This is probably something incredibly simple I'm missing, but I can't figure out why my listener won't work here.

I've defined a grid with a few colums below:

    ...
    {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');
            }
         }
}

I have tried everything, but I can't seem to get the alert to fire.

Any ideas?

• javascript
• events
• extjs
• grid

2 Answers 2

Well cellclick event is available to grid and not to column. You have added cellclick listener on column where you should add it to grid. See below example, you can run it on column's Ext Doc Code Editor, simply copy and paste it and select 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()
});

UPDATE :

If you want to capture event only for particular cell/column, you can use cellIndex property which is one of among cellclick function's argument. For e.g. : you want to show alert when user clicks on Lineage column and that column is 4th column, you will use below code :

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

Which version of ExtJS are you using? It is noticed that in certain versions (4.1.1 for sure) cellclick event is not being fired at all (see the ments in the offical documentation). If that's that case, try with itemclick event. Another reason could be that you are catching this event with

cellclick: function(record) {..

and you should with

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