Question

I created a grid using extjs library.

First created a model:

Ext.define('Option', {
    extend: 'Ext.data.Model',
    idProperty: 'OptionId',
    fields: [
        { name: 'TradeDate' },
        { name: 'OptionType' }
    ]
});

Second I created columns array:

var allColumns = [
    {
        text: 'Option Id',
        width: 75,
        sortable: true,
        cls: 'grid-header-LadderStep',
        dataIndex: 'ExternalId',
        renderer: RenderColumn
    },
    {
        text: 'Trade Date',
        width: 65,
        sortable: true,
        cls: 'grid-header-LadderStep',
        dataIndex: 'TradeDate',
        renderer: RenderColumn
    }
]

In column list renderer event is define below:

function RenderColumn (value, metaData, record, rowIdx, colIdx, store, view) {
    metaData.style = 'background-color:#BBD5EE !important';
    return value;
};

How can I know from the RenderColumn function, dataindex that I defined in column list?

It can be ExternalId or TradeDate in case that I described.

I found a solution:

grid.columns[colIdx].dataIndex

Where grid is a global grid variable.

Answer 1

Ok, so, this has not been documented yet by the Sencha team, but it’s available. You have to do it using a method available on the header container on the grid’s Ext.grid.View:

    renderer: function(val, meta, rec, rowIdx, colIdx, store, view) {
        var column = view.getHeaderAtIndex(colIdx);
        var dataIndex = column.dataIndex;
    }

The reason this works is because Ext.grid.View inherits from Ext.table.View which has a method, getHeaderAtIndex, that is supposed to be public, but has not been documented yet.

I found out that certain things aren’t documented yet via this