CODEWITHSUNDEEP
extjsextjs6extjs6-classic
Alexander
Alexander

Reputation: 20224

Programmatically change grid column order

I want to sort the columns in my grid, just like the rows. I have made a simple sort function that is called from an actioncolumn handler:

sortColumns:function(record) { // The record after which's values the columns are ordered
    var columns = this.columns;
    Ext.Array.sort(columns,function(col1,col2) {
        if(record.get(col1.dataIndex) > record.get(col2.dataIndex)) return 1;
        if(record.get(col1.dataIndex) < record.get(col2.dataIndex)) return -1;
        if(col1.dataIndex > col2.dataIndex) return 1;
        if(col1.dataIndex < col2.dataIndex) return 1;
        throw new Error("Comparing column with itself shouldn't happen.");
    });
    this.setColumns(columns);
});

The setColumns line now throws the error

Cannot add destroyed item 'gridcolumn-1595' to Container 'headercontainer-1598'

which is because the "old" columns are destroyed first, and then the "new" columns, which are the same and thus destroyed, are applied.

I only want to change the order, but I didn't find any function to do it. Do you know how to do it?

Drag-drop ordering of the columns works, so it is doable; but I don't find the source code where sencha did implement that drag-drop thingy. Do you know where to look for that code?

Upvotes: 1

Views: 6565

Answers (4)

Alexander
Alexander

Reputation: 20224

I have found that columns are items of the grid's headerCt, so the following works well, and unlike the other answers, it does not create new column components, keeping the column state and everything:

var headerCt = normalGrid.headerCt,
    columns = headerCt.items.getRange();

Ext.Array.sort(columns,function(col1,col2) {
    if(record.get(col1.dataIndex) < record.get(col2.dataIndex)) return -1;
    if(record.get(col1.dataIndex) > record.get(col2.dataIndex)) return 1;
    if(col1.dataIndex < col2.dataIndex) return -1;
    if(col1.dataIndex > col2.dataIndex) return 1;
    return 0;
});

headerCt.suspendLayouts();
for(var i=0;i<columns.length;i++)
{
    headerCt.moveAfter(columns[i],(columns[i-1] || null));
}
headerCt.resumeLayouts(true);

Upvotes: 2

JChap
JChap

Reputation: 1441

Reconfigure method needs two arguments

grid.reconfigure(store, columns)

Here is the fiddle that changes the columns programatically https://fiddle.sencha.com/#fiddle/17bk

Upvotes: 2

serg
serg

Reputation: 111265

I couldn't manage to do it without storing columns in a custom field and using reconfigure, maybe someone can suggest something better (reconfigure doesn't work well with just regular columns field it seems):

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',

    //just renamed "columns"
    myColumnConfigs: [
        //all your column configs
    ]
});

//to rearrange inside controller, also need to call it on grid render
var grid = this.getView();
var columns = grid.myColumnConfigs;
//...do your sorting on columns array
grid.reconfigure(columns);

Upvotes: 1

Zoran
Zoran

Reputation: 349

There is a reconfigure method which can be used to achieve reordering, e.g:

grid.reconfigure(columns);

Check the this.

Upvotes: 1

Related Questions