Ext JS 4: How to get clicked cell of grid using checkbox selection model?

Question

I've spent most of the past few days researching how to convert an application written in Ext JS 3 to Ext JS 4. Unfortunately, I see in the API documentation that the following methods/events do not exist any more in Ext JS 4: cellclick, getColumnModel().

With that said I have a grid panel that is using a checkbox selection model to select the rows in the grid you want to delete. Works as expected but the issue is I have cells in the grid that contain links (a href's) that require me to capture the "cellclick" event which no longer exists. So, I notice that I can use the "itemclick" event for the grid panel but the issue is this events parameters only pertain to the row of the grid.

I need the column index as well, so I can determine if the "itemclick" event occurred in the column containing all of the links (a href's) and if so I want to handle what should happen next.

Here is the code I am trying to convert to Ext JS 4

cellclick: function(grid,rowIndex,colIndex,e) {
    if (colIndex == 3) {
        var rec = grid.getStore().getAt(rowIndex);
        var fieldname = grid.getColumnModel().getDataIndex(colIndex + 1);
        var filename = rec.get(fieldname);

        if (!filename) return;
        var download_iframe = Ext.getCmp("report-download");
        if (!download_iframe) {
            download_iframe = document.createElement('iframe');
            download_iframe.id = 'report-download';
            download_iframe.style.display = 'none';
            download_iframe.height = '100';
            download_iframe.width = '600';
            document.body.appendChild(download_iframe);
            download_iframe.src = script to download file
        } else {
            download_iframe.src = script to download file
        }
        e.stopEvent();
    }
}

I've been able to convert this to Ext JS 4 but am missing one MAJOR piece of the code which is the ability to check what cell the "itemclick" event occurred in.

Ext JS 4 version:

this.control({
    'casereportGridPanel sgrid': {
        itemclick: this.downloadReport,
        selectionchange: this.toggleDelReportsBtn
    },
    .
    .
    .
    .
}

downloadReport: function(view, record, item, rowIndex, e) {
    var filename = record.data.file_name;

    if (filename) {
        if (!filename) return;
        var download_iframe = this.getDownloadContainer();
        if (!download_iframe) {
            download_iframe = document.createElement('iframe');
            download_iframe.id = 'downloadReportContainer';
            download_iframe.style.display = 'none';
            download_iframe.height = '100';
            download_iframe.width = '600';
            document.body.appendChild(download_iframe);
            download_iframe.src = script to download file
        } else {
            download_iframe.src = script to download file
        }
        e.stopEvent();
    }
},

Grid Configuration:

{
    xtype: 'sgrid',
    autoScroll: true,
    border: true,
    columnLines: true,
    id: 'myreportsgrid',
    loadMask: true,
    minHeight: 100,
    selModel: Ext.create('Ext.selection.CheckboxModel',{checkOnly: true}),
        plugins: [{
            ptype: 'rowexpander',
            rowBodyTpl: [
               '<div style="border: 1px solid #CFCFCF; margin-left: 48px; padding: 0 0 8px 0;">',
                    '<div style="border: 0px solid #000; font-weight: bold; margin-left: 5px; padding: 5px 0 5px 5px; width: 200px;"><u>' + _t("case.report.grid.rowexpander.title") + '</u></div>',
                    '<table border="0" style="border-color: #666; margin-left: 5px; width: 575px;">',
                        '<tbody>',
                            '<tr>',
                                '<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 75px;">' + _t("case.report.grid.rowexpander.casestatus") + ':</td>',
                                '<td style="border-color: #666; padding-left: 3px; vertical-align: bottom; width: 60px;">{case_status}</td>',
                                '<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 70px;">' + _t("case.report.grid.rowexpander.startdate") + ':</td>',
                                '<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{start_date}</td>',
                            '</tr>',
                            '<tr>',
                                '<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("case.report.grid.rowexpander.systemid") + ':</td>',
                                '<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{system_ids}</td>',
                                '<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("case.report.grid.rowexpander.enddate") + ':</td>',
                                '<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{end_date}</td>',
                            '</tr>',
                            '<tr>',
                                '<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("case.report.grid.rowexpander.parties") + ':</td>',
                                '<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;" colspan="3">{parties}</td>',
                            '<tr>',
                        '</tbody>',
                    '</table>',
               '</div>'
        ]
    }],
    store: 'CaseReports',
    columns: [
        {
            dataIndex: 'id',
            hidden: true,
            renderer: this.renderText,
            sortable: true,
            text: _t('case.report.grid.id'),
            width: 30
        }, {
            dataIndex: 'report_name',
            flex: 1,
            sortable: true,
            text: _t('case.report.grid.reportName')
        }, {
            dataIndex: 'file_name',
            hidden: true,
            sortable: true,
            text: _t('case.report.grid.filename'),
            width: 200
        }, {
            dataIndex: 'date_requested',
            renderer: this.renderDate,
            sortable: true,
                    text: _t('case.report.grid.requested'),
            width: 195
        }, {
            dataIndex: 'report_status',
            renderer: this.renderText,
            sortable: true,
                    text: _t('case.report.grid.reportStatus'),
            width: 80
        }
    ],
    emptyText: '<div style="font-size: 11px; font-weight: bold; padding: 5px 0px; text-align: center;">' + _t('case.report.grid.noreports.available') + '</div>',
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            disabled: true,
            action: 'deleteReport',
            icon: SC.Url.image('delete.gif'),
            text: _t('case.report.grid.deleteReports.btn'),
            tooltip: _t('case.report.grid.deleteReports.btn.tooltip')
        }, '->', { // begin using the right-justified button container
            iconCls: 'x-tbar-loading',
            action: 'refresh',
            tooltip: _t('case.report.grid.refresh.tooltip')
        }]
    }]

I would be very thankful if anyone could help shine some light on how to get this work in Ext JS 4.

Thank all of you in advance,

Shawn

Answer 1

I answered a similar question not too long ago: ExtJS 4 - Grid - Disable rowselection for specific column

The grid view has an event called cellmousedown which receives the following parameters:

1. view: The view of your grid
2. cell: The cell that was clicked
3. cellIndex: Index of the cell
4. record: The store record associated with the cell
5. row: The row of the cell
6. rowIndex: Index of the row
7. eOpts: Standard event option object

It's undocumented, and I only found it by source diving, but it's there. There's also a beforecellmousedown event that works the same way, but fired before events and returning false stops any further events. You can do something like:

viewConfig: {
    listeners: {
        cellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
            if(cellIdx === 3){
                // Your converted code here
            }
        }
    }
}

Answer 2

I think the problem is that checkboxmodel extends from rowselect which selects the entire row not a single cell.

I was able to pickup the target of the click even by using the event object that is supplied with every selection event regardless whether its cell or row type. kinda like this: event.getTarget().hash -- here i was after the hash property of a link. Hope this helps.