Question

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

有谁知道如何在4.1中完成此任务？

为了更清楚：

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

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

我现在已经解决了这个问题，我将在短期内发布一个答案以及我使用本地排序的缓冲商店的实现，以防任何人感兴趣并且我将来参考。< / p>

我还应该指出，我非常了解在需要缓冲的商店上进行本地排序所带来的客户端性能损失（而不是仅仅使用服务器上的数据进行远程排序）。 I am aware that this is probably why Sencha does not support local sorting on their buffered stores。我已经评估了所有的优点和缺点，在我的具体用例中，这对我来说是最明智的事情。

Answer 1

深埋在dom中，setSortState类和Ext.grid.header.Container类上有一个Ext.grid.column.Column函数。这些不会出现在4.1.0文档中的任何地方，但它们仍然在代码中。

您可以自己查看这些函数，以获得他们所做的完整概念，但这两个函数的要点是一个切换语句，用于查找'DESC'，'ASC'或{{{ 1}}在第一个参数中，例如：

null

使用单个setSortState(`DESC`); setSortState(`ASC`); setSortState(null);参数调用此函数的标题版本或列版本将删除列上的排序类。唯一真正的区别是标题版本查看网格的商店以在商店的null属性中查找活动排序器，然后使用该数据来确定调用此函数的列 - 列版本只是运行从中调用它的列对象。

在我的用例中，我没有向商店sorters属性添加分类器，因此我使用的是列版本（即从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();

    }
});

Answer 2

如果我理解正确，在指定列上设置此配置可以解决您的问题

columns: [
    {text: 'First Name',  dataIndex:'firstname', sortable: false},
    {text: 'Last Name',  dataIndex:'lastname'},
 ]

此处有更多详情http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-sortable

这是一个配置选项，因此在首次渲染网格时会禁用列的可排序性。

这是jsfiddle demo

*请注意，我使用Ext。 4.0.7，您可以切换到4.1.0，但由于某种原因，下拉列表中出现一个不相关的显示错误

Answer 3

重新加载商店时，您可以将以下内容添加到商店的加载事件处理程序中：

Ext.create("Ext.data.Store", {

    listeners: {
        load: {
            fn: function () {
                grid.addCls("no-sort-icon");
            }
        }
    }
};

然后修改你的css，当元素是“no-sort-icon”的子元素时隐藏图标（这将在网格上）

.no-sort-icon .x-column-header-text {
    background-image: none;
}
.no-sort-icon .x-column-header {
    background-color: #C5C5C5;
}

具有本地排序的缓冲存储（客户端）

3 个答案: