title: Ext JS 4: How to get clicked cell of grid using checkbox selection model?
body: <p>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().</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the code I am trying to convert to Ext JS 4</p>
  
  <pre><code>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();
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Ext JS 4 version:</p>
  
  <pre><code>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();
      }
  },
  </code></pre>
  
  <p>Grid Configuration:</p>
  
  <pre><code>{
      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: [
                 '&lt;div style="border: 1px solid #CFCFCF; margin-left: 48px; padding: 0 0 8px 0;"&gt;',
                      '&lt;div style="border: 0px solid #000; font-weight: bold; margin-left: 5px; padding: 5px 0 5px 5px; width: 200px;"&gt;&lt;u&gt;' + _t("case.report.grid.rowexpander.title") + '&lt;/u&gt;&lt;/div&gt;',
                      '&lt;table border="0" style="border-color: #666; margin-left: 5px; width: 575px;"&gt;',
                          '&lt;tbody&gt;',
                              '&lt;tr&gt;',
                                  '&lt;td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 75px;"&gt;' + _t("case.report.grid.rowexpander.casestatus") + ':&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; padding-left: 3px; vertical-align: bottom; width: 60px;"&gt;{case_status}&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 70px;"&gt;' + _t("case.report.grid.rowexpander.startdate") + ':&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; padding-left: 3px; vertical-align: bottom;"&gt;{start_date}&lt;/td&gt;',
                              '&lt;/tr&gt;',
                              '&lt;tr&gt;',
                                  '&lt;td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;"&gt;' + _t("case.report.grid.rowexpander.systemid") + ':&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; padding-left: 3px; vertical-align: bottom;"&gt;{system_ids}&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;"&gt;' + _t("case.report.grid.rowexpander.enddate") + ':&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; padding-left: 3px; vertical-align: bottom;"&gt;{end_date}&lt;/td&gt;',
                              '&lt;/tr&gt;',
                              '&lt;tr&gt;',
                                  '&lt;td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;"&gt;' + _t("case.report.grid.rowexpander.parties") + ':&lt;/td&gt;',
                                  '&lt;td style="border-color: #666; padding-left: 3px; vertical-align: bottom;" colspan="3"&gt;{parties}&lt;/td&gt;',
                              '&lt;tr&gt;',
                          '&lt;/tbody&gt;',
                      '&lt;/table&gt;',
                 '&lt;/div&gt;'
          ]
      }],
      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: '&lt;div style="font-size: 11px; font-weight: bold; padding: 5px 0px; text-align: center;"&gt;' + _t('case.report.grid.noreports.available') + '&lt;/div&gt;',
      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')
          }, '-&gt;', { // begin using the right-justified button container
              iconCls: 'x-tbar-loading',
              action: 'refresh',
              tooltip: _t('case.report.grid.refresh.tooltip')
          }]
      }]
  </code></pre>
  
  <p>I would be very thankful if anyone could help shine some light on how to get this work in Ext JS 4.</p>
  
  <p>Thank all of you in advance,</p>
  
  <p>Shawn</p>