具有本地排序的缓冲存储(客户端)

Question

我有一个缓冲网格,我已经实现了一个本地排序功能(客户端).我想在商店重新加载时删除列标题上的排序指示(较暗的背景和小箭头).

有谁知道如何在4.1中完成这个？

为了更清楚:

我希望我的列可以排序.我不希望它们在禁用排序的情况下进行初始化.用户应该能够单击标题并对其进行排序.但是,我想要的是能够以编程方式关闭排序.即,删除从用户点击应用的任何排序类(诸如较暗背景和小排序方向箭头之类的东西).

我这样做的原因是因为我使用了一个修改过的缓冲存储,它允许我使用所有缓冲数据(不仅仅是显示的块)进行本地排序(客户端).通常,使用缓冲存储将禁用本地排序,因为它只会对网格中显示的数据进行排序 - 而不是内存中的所有数据,因此Sencha的人员使任何具有缓冲存储的网格自动禁用本地排序 - 只有远程排序工作.好吧,正如我所说,我的修改,所以它会工作 - 但是当这个缓冲的存储重新加载来自数据库的新数据时,它不喜欢方便的sortOnLoad功能正常网格是理所当然的.在我的用例中,删除排序状态比覆盖sortOnLoading功能更合乎逻辑,并使其对新数据应用相同的排序,因此,这个问题.

我现在已经解决了这个问题,我将在短期内发布一个答案以及我对本地排序的缓冲商店的实施,以防任何人感兴趣并且我自己将来参考.

我还应该指出,我非常了解在需要缓冲的商店上进行本地排序所带来的客户端性能损失(而不是仅仅使用服务器上的数据进行远程排序).我知道这可能是为什么Sencha不支持在他们的缓冲商店进行本地排序的原因.我已经评估了所有的优点和缺点,在我的具体用例中,这对我来说是最明智的事情.

Answer 1

埋在教堂深处,课堂和课堂上都有一个setSortState功能.这些不会出现在4.1.0文档中的任何位置,但它们仍然在代码中.Ext.grid.header.ContainerExt.grid.column.Column

你可以看一下这些功能自己获得他们做什么一个完整的概念,但他们两人的要点是switch语句看起来为任何一个'DESC','ASC'或者null第一个参数,例如:

setSortState(`DESC`);
setSortState(`ASC`);
setSortState(null);

使用单个null参数调用此函数的头版本或列版本将删除列上的排序类.唯一的区别是,头版本着眼于电网的商店找到商店的活动分拣机sorters属性,然后使用这些数据来确定要调用哪个列.此功能-列版本只是运行了该列的对象,这是来自.

在我的用例中,我没有向store sorters属性添加分类器,所以我使用的是列版本(即setSortState从Ext.grid.column.Column对象调用).

首先,这是我实现允许本地(客户端)排序的缓冲存储的示例:

Ext.define('MyApp.store.TheBufferedStoreWithLocalSorting', {
    extend: 'Ext.data.Store',
    requires: [
        'Ext.ux.data.PagingMemoryProxy',
        'Ext.util.MixedCollection'
    ],
    model: 'MyApp.model.SomeModel',
    buffered: true,
    pageSize: 100,
    remoteSort: true, // this just keeps sorting from being disabled
    proxy: {
        type: 'pagingmemory',
        reader: 'json'
    },
    /* 
     * Custom sort function that overrides the normal store sort function.
     * Basically this pulls all the buffered data into a MixedCollection
     * and applies the sort to that, then it puts the SORTED data back
     * into the buffered store.               
     */                    
    sort: function(sorters) {
        var collection = new Ext.util.MixedCollection();

        collection.addAll(this.proxy.data);
        collection.sort(sorters);
        this.pageMap.clear();
        this.getProxy().data = collection.getRange();
        this.load();

    }
});

现在,为了回答我的问题,每当商店重新加载时删除分拣机类我只需要这样做:

Ext.each(myGrid.columns, function(column, index) {
    if (column.hasCls('x-column-header-sort-ASC') ||
        column.hasCls('x-column-header-sort-DESC')) {
        myGrid.columns[index].setSortState(null);
        return false;
    }
});