ExtJs 4 get Grid column Index based on dataIndex (column name)

A few days back I was working on a Project that required adding a new Row in the Grid and then start editing a specific Cell. All the examples that I found was using startEditByPosition with some Row and Column Index.

Now the issue was that I always wanted a specific column in the Row that was added to start Editing but the user could have moved the columns. So hard coding the column Index was not an option. Here is the sample code for the method that will return the column Index based on the dataIndex(column name) at the time the Row was added.

 onAddMessageRow : function(grid, rowIndex, colIndex) {
  rec = grid.getStore().getAt(rowIndex);
  newIndex = rowIndex + 1;
  newRecord = Ext.create('SAMPLE.model.Message', {
   ........
   ........
   ........
  });
  grid.getStore().insert(newIndex, newRecord);
  edit = grid.editingPlugin;
  edit.startEditByPosition({
   row: newIndex,
   column: this.getColumnIndex(grid,'MYCOLUMN')
  });
 },
                  
 getColumnIndex: function(grid, dataIndex) {
  gridColumns = grid.headerCt.getGridColumns();
  for (var i = 0; i < gridColumns.length; i++) {
   if (gridColumns[i].dataIndex == dataIndex) {
    return i;
   }   
  }
 }

Recommended Reading

• ExtJs 4 Grid Editing tutorial - Java Servlet, JSON and MySQL