how to find column index using dataIndex Extjs 4

Question

Well in ExtJS 3 i used the following code:

grid.getColumnModel().findColumnIndex("Tasks")

I tried finding it on the api docs, but no luck...so how is ir possible that i can find the column index of the grid by the dataIndex of the column or the header name of that column.

Desdamona

Answer 1

You can use the component query:

var fname = grid.down('[dataIndex=firstname]');

It took a while to work that out - there doesnt seem to be an example in the docs. ;-)

Minelayer

I prefer this answer which uses a selector over the accepted answer that involves potentially iterating every column in the grid. – Obreption

Answer 2

I guess you should find index by iterating through grid.columns array and comparing dataIndex property of each column.

Example:

var findColumnIndex = function(columns, dataIndex) {
    var index;
    for (index = 0; index < columns.length; ++index) {
        if (columns[index].dataIndex == dataIndex) { break; }
    }​​​​​​​​
    return index == columns.length ? -1 : index;
}


console.log(findColumnIndex(grid.columns, 'Task'));
console.log(findColumnIndex(grid.columns, 'Something'));

Balliol

Instead of grid.columns use grid.columnManager.columns. That way if the columns are reordered, your function returns the correct index. – Perce

Answer 3

The most standard way to get a column by dataIndex would be:

var column = grid.columnManager.getHeaderByDataIndex('Tasks')

Note that this does return a column (contrary to the function name). This is because a grid header in ExtJS is actually both a header and a column contents.

Ext.grid.column.Column docs:

This class specifies the definition for a column inside a Ext.grid.Grid. It encompasses both the grid header configuration as well as displaying data within the grid itself.

See also: getHeaderByDataIndex docs.

Stansbury

This is the most "by the docs" method in Ext JS v6. Thanks! – Nilsanilsen

Answer 4

function getColumnIndex(grid, dataIndex) {
    gridDataIndices = Ext.Array.pluck(grid.columns, 'dataIndex');

return Ext.Array.indexOf(gridDataIndices, desireDataIndex);
}

answered in sencha forums

Curare

Answer 5

 var gridColumns = grid.headerCt.getGridColumns();
 for (var i = 0; i < gridColumns.length; i++) {
   if (gridColumns[i].dataIndex == 'yourdataIndex') {
    alert(i);
   }  
 }

Indium

Answer 6

Component Query can get a bit slow and wont guarantee only one result. Its a bit faster to just iterate over the array of columns that belong to the grid.

Here is a simple static util function that does the trick using ext framework.

 findColumnDataIndex: function(columns, dataIndex) {
   var column = null;
   Ext.Array.each(columns, function(c) {
     if (c.dataIndex === dataIndex) {
       column = c;
       return false;
     }
   }, this);
   return column;
 }

use this code to get the columns from your grid panels instance

var columns = grid.headerCt.items.items,

Chemush

Answer 7

var RowEditor = new Ext.grid.plugin.RowEditing({...});
    RowEditor.editor.form.findField('Task');

Pennoncel

Please explain your answer so that it would be useful for future users. – Frozen