Программно изменить порядок столбцов сетки

Question

Я хочу отсортировать столбцы в моей сетке, как строки. Я сделал простую функцию сортировки, которая вызывается из обработчика 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 реализовал эту штуку с перетаскиванием. Вы знаете, где искать этот код?

Answer 1

Я обнаружил, что столбцы являются элементами 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);

Answer 2

Метод перенастройки требует двух аргументов

grid.reconfigure(store, columns) 

Вот скрипка, которая изменяет столбцы программно https://fiddle.sencha.com/

Answer 3

Мне не удалось сделать это без сохранения столбцов в настраиваемом поле и использования переконфигурирования, может быть, кто-то может предложить что-то лучше (переконфигурирование не очень хорошо работает с обычным полем столбцов, кажется):

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

Answer 4

Существует метод перенастройки, который можно использовать для переупорядочения, например:

grid.reconfigure(columns);

Проверьте это.