3

ローカル ソート機能 (クライアント側) を実装したバッファー グリッドがあります。ストアの再読み込み時に、列ヘッダーの並べ替え表示 (暗い背景と小さな矢印) を削除したいと考えています。

4.1でこれを達成する方法を知っている人はいますか?

これを明確にするために：

列をソート可能にしたい。並べ替えを無効にして初期化したくありません。ユーザーはヘッダーをクリックして、必要に応じて並べ替えることができる必要があります。しかし、私が望むのは、プログラムでソートをオフにできることです。つまり、ユーザーのクリックから適用された並べ替えクラス (暗い背景や小さな並べ替え方向矢印など) を削除します。

これを行う理由は、(表示されるチャンクだけでなく) すべてのバッファリングされたデータをローカルでソート (クライアント側) できるようにする、変更されたバッファリングされたストアを使用しているためです。通常、バッファリングされたストアを使用するとローカルソートが無効になります。メモリ内のすべてのデータではなく、グリッドに表示されるデータのみがソートされるためです。 - リモートソートのみが機能します。さて、私が言ったように、私のものは動作するように変更されていますが、このバッファリングされたストアがデータベースからの新しいデータでリロードされると、sortOnLoad通常のグリッドが当然得る便利な機能を享受できません. 私のユースケースでは、ソート状態をオーバーライドするよりも、ソート状態を削除する方が論理的です。sortOnLoading機能を変更し、新しいデータに同じ並べ替えを適用するようにします。したがって、この質問です。

誰かが興味を持っている場合に備えて、将来の参考のために、ローカルソートを使用したバッファリングされたストアの実装とともに、すぐに回答を投稿します。

また、(サーバー上でデータのリモート ソートを使用するのではなく) バッファリングが必要なストアでのローカル ソートに伴うクライアント側のパフォーマンスの低下についても認識していることを指摘しておく必要があります。これがおそらく、Sencha がバッファストアでのローカルソートをサポートしていない理由であることは承知しています。私はこれに対する長所と短所をすべて評価しましたが、私の特定のユースケースでは、これが私にとって最も賢明なことです。

4

3 に答える 3

6

DOM の奥深くに埋もれているのは、クラスとクラスsetSortStateに関する機能です。これらは 4.1.0 ドキュメントのどこにも表示されませんが、それでもコード内にあります。Ext.grid.header.ContainerExt.grid.column.Column

これらの関数を自分で見て、それらが何をするかの完全な概念を得ることができますが、両方の要点は、最初の引数でa 'DESC'、'ASC'または aのいずれかを探す switch ステートメントです。null

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

1 つの引数を指定してこの関数のヘッダー バージョンまたは列バージョンを呼び出すと、null列の並べ替えクラスが削除されます。唯一の実際の違いは、ヘッダー バージョンがグリッドのストアを調べて、ストアのsortersプロパティでアクティブなソーターを見つけ、そのデータを使用して、この関数を呼び出す列を決定することです。列バージョンは、単に列オブジェクトから実行されます。から呼び出されます。

私のユース ケースでは、storesortersプロパティにソーターを追加しないので、列バージョンを使用しています (つまり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;
    }
});
于 2012-06-14T20:41:18.607 に答える
0

ストアがリロードされると、ストアのロード イベント ハンドラーに以下を追加できます。

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

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

次に、要素が「no-sort-icon」の子である場合にアイコンを非表示にするようにcssを変更します（これはグリッド上にあります）

.no-sort-icon .x-column-header-text {
    background-image: none;
}
.no-sort-icon .x-column-header {
    background-color: #C5C5C5;
}
于 2012-06-14T18:27:39.877 に答える
0

私があなたを正しく理解していれば、指定された列にこの構成を設定すると問題が解決するはずです

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のデモがあります

* Ext を使用していることに注意してください。4.0.7、4.1.0に切り替えられるのですが、なぜかドロップダウンとは関係のない表示バグが出ます

于 2012-06-14T18:14:59.650 に答える