3

Ext.grid.Panelフィルタを適用する必要があるグリッド（ ）があります。これらのフィルターは事前定義されます（グリッド列のドロップダウンから手動で選択して設定するフィルターとは対照的です）。

私には2つの機能があります：

// Clear filter
function() {
    grid.filters.clearFilters();
}

// Apply filter
function() {
    grid.filters.clearFilters();

    grid.filters.addFilter({
        dataIndex: 'size',
        type: 'list',
        options: ['small', 'medium', 'large', 'extra large'],
        value: ['small', 'medium']
    });

    store.load();
}

初めてフィルターを適用すると、完全に機能します。ただし、関数を呼び出してフィルターをクリアしてからフィルターを再度適用しようとすると、データはフィルター処理されません。エラーやフィードバックはまったくありません。

これがフィルターを追加するための推奨される方法であるかどうかもわかりません。フィルターがストアに直接適用される例をオンラインで見ましたが、私が見たところ、グリッドはそれらのフィルターが適切に配置されていることを認識しません。

どんな助けでも大歓迎です。

4

3 に答える 3

3

私もこれをしなければなりませんでした。これは、JSON「グリッド形式オブジェクト」（任意の数のグリッドフィルター、表示列、並べ替え列と方向を含む）をレンダリングされたグリッドパネルに適用する、より大きな関数の一部でした。

要件は、ユーザーが既存のグリッドパネルの表示列を保存し、フィルターを適用し、名前を付けてデータベースに並べ替えを適用し、後日、これら3つをグリッドパネルに再適用して同じものを取得できるようにする必要があることでした。保存された形式を選択することにより、フィルター、表示列、およびソート状態。

また、ユーザーが調整したい場合に備えて、選択したフィルターオプションをグリッドパネルフィルター機能のUI（グリッドフィルターのドロップメニュー）に表示する必要があるため、ストアフィルターを使用したくありませんでした。

ユーザーが保存するグリッド形式のJSONの例を次に示します。

{
"columns":[
    "first_name",
    "last_name",
    "course",
    "course_room",
    "student_status",
    "start_date",
    "schedule",
    "time_on_course",
    "attendance",
    "this_period",
    "acct_bal"
  ],
"filters":[{
    "field":"student_status",
    "data":{
        "type":"list",
        "value":"Attending"
    }
}],
"sort":{
        "property":"start_date",
        "direction":"ASC"
    }
}

関数は次のとおりです。JSONが引数として使用されます。

applyLogFormat: function(format) {
    var log = this.getLog(),
        format = Ext.JSON.decode(format);

    log.filters.autoReload = false;

    // apply the grid filters correctly
    log.filters.clearFilters();
    Ext.each(format.filters, function(filter) {
        var gridFilter = log.filters.getFilter(filter.field);

        gridFilter.setActive(true);
        switch(gridFilter.type) {

            case 'date':
                var dateValue = Ext.Date.parse(filter.data.value, 'm/d/Y'),
                    value = filter.data.comparison == 'gt' ? {after: dateValue} : {before: dateValue};

                gridFilter = log.filters.getFilter(filter.field);
                gridFilter.setValue(value);
                break;

            case 'list':
                gridFilter = log.filters.getFilter(filter.field);
                gridFilter.menu.setSelected(gridFilter.menu.selected, false);
                gridFilter.menu.setSelected(filter.data.value.split(','), true);
                break;

            default :
                gridFilter = log.filters.getFilter(filter.field);
                gridFilter.setValue(filter.data.value);
                break;
        }
    });

    // remove any pre-existing sorting from the grid
    Ext.each(log.columns, function(column, index) {
        if (column.hasCls('x-column-header-sort-ASC') ||
            column.hasCls('x-column-header-sort-DESC')) {
            log.columns[index].setSortState(null);
            return false;
        }
    });

    // show only the specified columns
    log.suspendLayout = true;
    Ext.each(log.columns, function(column) {
        if (column.dataIndex) {
            column.setVisible(Ext.Array.contains(format.columns, column.dataIndex));
        }
    });
    log.suspendLayout = false;
    log.doComponentLayout();

    // set the sorter
    if (format.sort) {
        var column = log.down('gridcolumn[dataIndex=' + 
            format.sort.property + ']');
        column.setSortState(format.sort.direction);
        log.filters.autoReload = true;
    } else {
        log.store.sorters.clear();
        log.store.loadPage(1);
        log.filters.autoReload = true;
    }
}

これはすべて4.1.0で行われました

編集：

その関数からは見えない実装の重要な部分があることに気づきました。

通常、グリッドパネルfilter featureメニューは、ユーザーがそれらの1つを物理的にクリックするまで作成されません。次に、それらはすべて作成されます。これはメモリ節約の目的だと思いますか？

明らかに、この機能はフィルターメニューが作成されるまで機能しません。

afterrenderこれを処理するために、グリッドパネルのイベントで明示的に作成して、すぐに使用できるようにします。この機能は、ユーザーがフィルターメニューの1つをクリックしていなくても機能します。

私はMVCパターンを使用しているので、次のようにグリッドパネルのコントローラーから使用しました。

// code from gridpanel's controller
var me = this;
me.control({

    'log': {
        afterrender: function() {
            me.getLog().filters.createFilters();
        },
    },

    // ... other event handlers

});
于 2012-07-23T04:15:19.417 に答える
1

グリッド初期化コードでこれを試してください

filtersCfg.createFilters();

filtersCfg.filters.each(function (filter) {
     filter.setActive(true);
     filter.setActive(false);
});
于 2012-09-17T14:17:32.867 に答える
0

なぜフィルターを適用しgrid.filtersないのgrid.storeですか？Ext.data.Storeには次のメソッドがfilter()ありますclearFilter()

于 2012-07-23T00:58:24.003 に答える