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

Answer 1

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

Answer 2

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

Answer 3

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'));

Answer 4

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,

Answer 5

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. ;-)

Answer 6

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.