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.

score 33 · Accepted Answer · answered Mar 03 '13 at 02:06

33

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

answered Mar 03 '13 at 02:06

Murrah

1,508
1
13
26

I prefer this answer which uses a selector over the accepted answer that involves potentially iterating every column in the grid. – Tom O. Jun 15 '17 at 15:56

score 9 · Answer 2 · answered Dec 06 '12 at 12:14

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

Instead of `grid.columns` use `grid.columnManager.columns`. That way if the columns are reordered, your function returns the correct index. — Mehran, Dec 25 '13 at 10:39

score 4 · Answer 3 · answered Jun 07 '17 at 17:08

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.

This is the most "by the docs" method in Ext JS v6. Thanks! – randy Nov 24 '20 at 15:18 — randy, Nov 24 '20 at 15:18

score 2 · Answer 4 · answered Oct 13 '15 at 09:42

2

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

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

answered in sencha forums

answered Oct 13 '15 at 09:42

Mohammadreza

3,139
8
35
56

Srinivas B · Answer 5 · 2012-12-06T13:10:03.100

0

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

edited Dec 06 '12 at 13:10

answered Dec 06 '12 at 13:04

Srinivas B

1,821
4
17
35

score 0 · Answer 6 · answered Mar 31 '15 at 19:54

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,

score 0 · Answer 7 · answered Oct 05 '15 at 14:29

0

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

answered Oct 05 '15 at 14:29

Macedonian

47
11

Please explain your answer so that it would be useful for future users. – Prudhvi Oct 05 '15 at 15:04

how to find column index using dataIndex Extjs 4

7 Answers7

Linked