Ext JS 4: Как получить щелчок по ячейке сетки, используя модель выбора флажка?

Question

Я провел большую часть последних нескольких дней, исследуя, как преобразовать приложение, написанное в Ext JS 3, в Ext JS 4. К сожалению, в документации API я вижу, что следующие методы / события больше не существуют в Ext JS 4: cellclick, getColumnModel ().

С учетом сказанного у меня есть панель сетки, в которой используется модель выбора флажков для выбора строк в сетке, которые вы хотите удалить. Работает, как и ожидалось, но проблема в том, что у меня есть ячейки в сетке, которые содержат ссылки (href's), которые требуют, чтобы я захватил событие "cellclick", которое больше не существует. Итак, я заметил, что могу использовать событие itemclick для панели сетки, но проблема в том, что параметры этого события относятся только к строке сетки.

Мне также нужен индекс столбца, чтобы я мог определить, произошло ли событие «itemclick» в столбце, содержащем все ссылки (ссылки), и если да, я хочу обработать то, что должно произойти дальше.

Вот код, который я пытаюсь преобразовать в 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();
    }
}

Мне удалось преобразовать это в Ext JS 4, но мне не хватает одного ОСНОВНОГО фрагмента кода, который позволяет проверить, в какой ячейке произошло событие "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')
        }]
    }]

Я был бы очень благодарен, если бы кто-нибудь мог помочь пролить свет на то, как получить эту работу в Ext JS 4.

Спасибо всем заранее,

Shawn

Answer 1

Я ответил на аналогичный вопрос не так давно: ExtJS 4 - Сетка - Отключить выбор строки для определенного столбца

В виде сетки есть событие с именем cellmousedown, которое получает следующие параметры:

1. просмотр: вид вашей сетки
2. ячейка: ячейка, на которую нажали
3. cellIndex: индекс ячейки
4. запись: запись магазина, связанная с ячейкой
5. строка: строка ячейки
6. rowIndex: индекс строки
7. eOpts: объект опции стандартного события

Он недокументирован, и я нашел его только при исходном погружении, но он есть. Также существует событие beforecellmousedown, которое работает таким же образом, но запускается перед событиями и возвращает false, останавливает любые дальнейшие события. Вы можете сделать что-то вроде:

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

Answer 2

Я думаю, что проблема в том, что checkboxmodel расширяется от rowselect, который выбирает всю строку, а не одну ячейку.

Мне удалось выбрать цель щелчка, даже используя объект события, который поставляется с каждым событием выбора независимо от того, является ли его ячейка или тип строки.вроде как: event.getTarget().hash - здесь я был после свойства хеша ссылки.Надеюсь, это поможет.