Extjs4 Ext JS 4：如何使用复选框选择模型获取网格的单击单元格？

在过去的几天里，我一直在研究如何将用ExtJS3编写的应用程序转换为ExtJS4。不幸的是，我在API文档中看到，ExtJS4中不再存在以下方法/事件：cellclick，getColumnModel（）

说到这里，我有一个网格面板，它使用复选框选择模型来选择网格中要删除的行。工作正常，但问题是网格中的单元格包含链接（a href），这些链接要求我捕获不再存在的“cellclick”事件。因此，我注意到我可以对网格面板使用“itemclick”事件，但问题是这个事件参数只适用于网格的行

我还需要列索引，这样我就可以确定“itemclick”事件是否发生在包含所有链接的列中（a href），如果是，我想处理接下来应该发生的事情

下面是我试图转换为ExtJS4的代码

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

我已经能够将其转换为ExtJS4，但是我缺少一段主要的代码，即检查“itemclick”事件发生在哪个单元格中的功能

Ext JS 4版本：

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

网格配置：

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

{
xtype:'sgrid'，
autoScroll：是的，
边界：是的，
专栏：没错，
id:“myreportsgrid”，
loadMask：是的，
身高：100，
selModel:Ext.create（'Ext.selection.CheckboxModel'，{checkOnly:true}），
插件：[{
p类型：“行扩展器”，
rowBodyTpl：[
'',
''+\t（“case.report.grid.rowexpander.title”）+''，
'',
'',
'',
''+\t（“case.report.grid.rowexpander.casestatus”）+'：'，
“{case_status}”，
“+”t（“case.report.grid.rowexpander.startdate”）+“：”，
“{开始日期}”，
'',
'',
''++（“case.report.grid.rowexpander.systemid”）+'：'，
“{system_ids}”，
“+”t（“case.report.grid.rowexpander.enddate”）+“：”，
“{end_date}”，
'',
'',
“+”t（“case.report.grid.rowexpander.parties”）+“：”，
“{parties}”，
'',
'',
'',
''
]
}],
商店：“案例报告”，
栏目：[
{
数据索引：“id”，
隐藏：是的，
渲染器：this.renderText，
可排序：是的，
文本：_t（'case.report.grid.id'），
宽度：30
}, {
dataIndex:'报告名称'，
弹性：1，
可排序：是的，
文本：_t（'case.report.grid.reportName'）
}, {
数据索引：“文件名”，
隐藏：是的，
可排序：是的，
文本：_t（'case.report.grid.filename'），
宽度：200
}, {
数据索引：“请求的日期”，
渲染器：this.renderDate，
可排序：是的，
文本：_t（'case.report.grid.requested'），
宽度：195
}, {
数据索引：“报告状态”，
渲染器：this.renderText，
可排序：是的，
文本：_t（'case.report.grid.reportStatus'），
宽度：80
}
],
emptyText:''+\t（'case.report.grid.noreports.available'）+''，
摘要：[{
xtype:'工具栏'，
项目：[{
残疾人:对,，
操作：“删除报告”，
图标：SC.Url.image（'delete.gif'），
文本：_t（'case.report.grid.deleteReports.btn'），
工具提示：_t（'case.report.grid.deleteReports.btn.tooltip'）
}，'->'，{//开始使用右对齐的按钮容器
iconCls:'x-tbar-loading'，
操作：“刷新”，
工具提示：\ t（'case.report.grid.refresh.tooltip'）
}]
}]

如果有人能帮助我了解如何在ExtJS4中完成这项工作，我将非常感激

先谢谢大家,

---

Shawn

我认为问题在于checkboxmodel扩展了rowselect，它选择整行而不是单个单元格

我甚至可以通过使用每个选择事件提供的事件对象（无论其单元格类型还是行类型）来拾取单击的目标。有点像这样：

---

event.getTarget（）.hash

——我在查找链接的hash属性。希望这能有所帮助。

不久前我回答了一个类似的问题：

网格视图有一个名为

cellmousedown

的事件，该事件接收以下参数：

视图：网格的视图

单元格：单击的单元格

cellIndex：单元格的索引

记录：与单元格关联的存储记录

行：单元格的行

rowIndex：行的索引

eOpts：标准事件选项对象

它没有文档记录，我只是通过源代码潜水找到它，但它就在那里。还有一个

beforecellmousedown

事件，其工作方式相同，但在事件之前触发并返回false stops任何其他事件。您可以执行以下操作：

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

---

您在处理程序中的“item”参数中得到了什么？