How to get modified columns after columnmove() in Ext Grid with CheckBox Selection model

Question

I have a Ext Grid with CheckBox Selection model and I have made columns movable. Once I move the columns, I am not able to retrieve the columns' dataindex, how to get that ? I had cell modal and I was retrieving it perfectly with

var sm = Ext.create('Ext.selection.CheckboxModel', {
        mode: 'SIMPLE',
        checkOnly: true,
        listeners: {
            selectionchange: function(sm, selected, eOpts) {
                listCB = selected;
                var gridID = Ext.getCmp('CiEditGrid');
                if(selected.length > 0){
                    gridID.getView().removeRowCls(0, 'hidden');
                    gridID.getView().addRowCls(0, 'custom-column1');
                    bEnableRow = true;
                }else{
                    gridID.getView().addRowCls(0, 'hidden');
                }
            },
            beforeselect: function(selModel, record, index) {
                var gridID = Ext.getCmp('CiEditGrid');
                popupIndex=index;
                colIndex=ColumnIndex;
                EditedValues.push({
                    colvalue:colIndex,
                    rowvalue:popupIndex
                });
                if (!((ColumnIndex == undefined || ColumnIndex == 0)))
                    return false;
            },
            beforedeselect: function(selModel, record, index) {
                if (!(ColumnIndex == undefined || ColumnIndex == 0))
                    return false;
            },
        }
    });

var CiGrid = Ext.create('Ext.grid.Panel', {

store: mystore,
columns: datastore.columns,
selType: 'cellmodel',  
selModel: sm,
id:'CiEditGrid',
height: 775,
columnLines: true,
enableColumnHide:false, 
viewConfig: {
                forceFit: false,
                deferEmptyText: false,
                stripeRows: true,
                emptyText :'<div class="emptyTextClass">'+noRecordsFoundMsg+'</div>'
            },
lockedViewConfig: {
    emptyText: ''
},
listeners: {
    afterrender: function(grid, eOpts){
        var gridIndxArray = grid.columns;
        for(var i=0; i<gridIndxArray.length; i++){
            var Indx = i-1; 
            if(Indx == -1)
                Indx = 0;
            ColumnIndexArray.push({
                dataIndx:gridIndxArray[i].dataIndex,
                StoreIndx:Indx
            });
        }
    },
    columnmove: function(ct, column, fromIdx, toIdx, eOpts){
        isColumnreconfigured = true;
        fromCMIdx = fromIdx;
        toCMIdx = toIdx;
    },
    itemclick: function(data, record, item, index, e, eOpts){
        popupIndex = index;
        var position = data.getPositionByEvent(e);
        ColumnIndex = position.column;
        if(index == 0){
            multiCol.push({
                colIndex:ColumnIndex
            });
        }
        if(isColumnreconfigured){
            for(var i=0; i<ColumnIndexArray.length; i++){
                if(selModel.getHeaderCt().getHeaderAtIndex(colIndex).dataIndex == ColumnIndexArray[i].dataIndx){ //Not getting the value in selModel.getHeaderCt().getHeaderAtIndex(colIndex).dataIndex
                    colIndex = ColumnIndexArray[i].StoreIndx;
                    break;
                }
            }
        }
    }
},  
cls: 'custom-dirty', 
layout:'fit',  
border: false,
autoWidth:true,  
plugins: [cellEditing],
renderTo:'grid'

});

Not getting the values in "selModel.getHeaderCt().getHeaderAtIndex(colIndex).dataIndex"

Answer 1

If you want to get the dataIndex of the moved column, you can do it in the columnmove listener, like so:

columnmove: function (ct, column, fromIndex, toIndex, eOpts) {
    var dataIndex = column.dataIndex;
    // ...
},

It's worth noting, that the columnmove event has toIndex argument, but it is the visible index of the column. To get the real index of the column, you can call column.getIndex().

If you want to get all the columns after moving them, you can call the getGridColumns() method of the grid header container.

Having grid, you can get all columns like so:

var allColumns = grid.getView().getHeaderCt().getGridColumns();