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

时间:2016-03-10 17:17:58

标签: extjs extjs6 extjs6-classic

我想对网格中的列进行排序,就像行一样。我创建了一个从actioncolumn处理程序调用的简单排序函数:

<div type="button" class="fa fa-lightbulb-o fa-lg popover-img" data-toggle="popover" title="" data-content=<%=cl_image_tag(@hiragana.upload, :width => 260, :height => 340)%> > contenu de ce que je dois cliquer dessu pour afficher le popover</div>

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

这是因为&#34; old&#34;列首先被销毁,然后是&#34; new&#34;应用了相同且因此被破坏的列。

我只想改变顺序,但我没有找到任何功能。你知道怎么做吗?

列的拖放顺序有效,所以它是可行的;但是我找不到sencha确实实现了拖放功能的源代码。你知道在哪里寻找那段代码吗?

4 个答案:

答案 0 :(得分:2)

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

grid.reconfigure(store, columns) 

这是以编程方式https://fiddle.sencha.com/#fiddle/17bk

更改列的小提琴

答案 1 :(得分:1)

有一种可用于实现重新排序的重新配置方法,例如:

grid.reconfigure(columns);

检查this

答案 2 :(得分:1)

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

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

答案 3 :(得分: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);