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"

What do you mean 'new columns'? Show your code and where exactly is your problem. Preferably with a working fiddle. — MarthyM
I don't see colIndex defined anywhere, also, if you need to access selModel.getHeaderCt().getHeaderAtIndex(colIndex).dataIndex in a loop, store it in a variable beforehand. Your code is really hard to orient in. If you just want to get a dataIndex of the moved column, you have the colum accessible right in your columnmove listener. — MarthyM
Actually I need to get dataIndex of each column after columnmove. In columnmove listener I am getting the from and to column Indices and I can then manipulate the entire columns but I am looking for a simpler solution. Like I used to get when I was using CellModel (selModel.getHeaderCt().getHeaderAtIndex(colIndex).dataIndex). — Him Singhvi
You can get an array of all grid columns with header container getGridColumns() method, you can use it like so: var columns = selModel.getHeaderCt().getGridColumns() and then iterate through columns in a for cycle. — MarthyM

MarthyM MarthyM · Accepted Answer · 2017-08-17T10:51:09

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

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

1 Answers