Get value of clicked cell on grid

Question

I have been trying to get the value of clicked cell on grid.

cellDblClick: function(self, td, cellIndex, record, tr, rowIndex, e, eOpts)

I know I can get the record data, but I need the name of the column to get the value of the data.

record.data["name_of_column"]

What's the approach to get the value of clicked cell on grid? Is it possible to get the column name of clicked cell on grid?

Can anyone shed the light for me?

N.B. I'm using extjs 4.2.1

Lighting

Answer 1

You can use viewConfig of grid with cellclick listener as follows.

 viewConfig : {
    listeners : {
        cellclick : function(view, cell, cellIndex, record,row, rowIndex, e) {

              var clickedDataIndex = view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
              var clickedColumnName = view.panel.headerCt.getHeaderAtIndex(cellIndex).text;
              var clickedCellValue = record.get(clickedDataIndex);
          }
     }
 }

Stavro

Answer 2

You can use :

onGridpanelCellDblClick: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
    var clickedColumnName = record.getFields()[cellIndex-1].getName();
    var clickedCellValue = record.get(clickedColumnName);
}

The cell index starts from 1 so you have to use cellIndex-1 for the array returned by record.getFields().

Pham

This will NOT work if you have grid columns in any other order than in fields in model field definition. Because Extjs grid natively supports dragging columns, thus changing their order, this will not work even if you originally have columns in the same order as model fields. – Insulate

Answer 3

You can use:

cellclick: function( thisGrid, td, cellIndex, record, tr, rowIndex, e, eOpts )
{
    console.log('td/cell value: ', td.innerText);

},

Lowland