以编程方式更改网格列顺序答案

【问题标题】：Programmatically change grid column order以编程方式更改网格列顺序
【发布时间】：2016-03-10 17:17:57
【问题描述】：

我想对网格中的列进行排序，就像行一样。我制作了一个从 actioncolumn 处理程序调用的简单排序函数：

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

setColumns 行现在抛出错误

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

这是因为“旧”列首先被销毁，然后应用相同并因此被销毁的“新”列。

我只想更改顺序，但我没有找到任何功能。你知道怎么做吗？

列的拖放排序工作，所以它是可行的；但我没有找到 sencha 实现拖放的源代码。你知道在哪里可以找到该代码吗？

【问题讨论】：

看看这篇文章：sencha.com/forum/…，grid.columnManager.columns 可以帮到你。

标签： extjs extjs6 extjs6-classic

【解决方案1】：

重新配置方法需要两个参数

grid.reconfigure(store, columns)

这是以编程方式更改列的小提琴https://fiddle.sencha.com/#fiddle/17bk

【讨论】：

【解决方案2】：

我发现列是网格 headerCt 的项目，所以下面的效果很好，并且与其他答案不同，它不会创建新的列组件，保持列状态和所有内容：

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

【讨论】：

【解决方案3】：

有一个reconfigure方法可以用来实现重新排序，例如：

grid.reconfigure(columns);

检查this。

【讨论】：

如果我只是重新排序旧列，reconfigure 似乎不起作用。它抛出错误Cannot add destroyed item 'gridcolumn-1631' to Container 'headercontainer-1634'。
老实说我没有在 Ext6 中使用 reconfigure。但是似乎有另一种方法可以做到这一点，请检查链接：。 sencha.com/forum/…

【解决方案4】：

如果不将列存储在自定义字段中并使用重新配置，我无法做到这一点，也许有人可以提出更好的建议（重新配置似乎不适用于常规列字段）：

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

【讨论】：