javascript - Sencha: 同じストアからの異なるコンテンツを示す 2 つのリスト。可能？

Question

たとえば、これがストアにあるとします。

[
    {
        name: 'Criteria 1',
        status: 'In'
    },
    {
        name: 'Criteria 2',
        status: 'Out'
    },
    ...
]

そのストアの 1 つのリストに In の条件を表示し、別のリストに Out の条件を表示する必要があります。することは可能ですか？

Answer 1

数ヶ月前、Sencha 用の FilteredStore クラスを作成しました。

完璧ではありませんが、非常に役立つかもしれません。
基本的に、別のストアをフィルタリングして新しいストアを作成できます。

Ext.define('Ext.data.FilteredStore', {
    extend: 'Ext.data.Store',

    ///////////////////////////////////////////////////////////////////////////
    // Configuration

    config: {
        model: 'Ext.data.Model',
        sourceStore: undefined,
        filter: undefined
    },

    ///////////////////////////////////////////////////////////////////////////
    // Fields
    sourceStore: undefined,

    ///////////////////////////////////////////////////////////////////////////
    // Configuration methods

    updateSourceStore: function (newValue, oldValue) {
        //TODO: Remove hooks from old store (oldValue)

        // See if we've received a valid source store
        if (!newValue)
            return;

        // Resolve the source store
        this.sourceStore = Ext.data.StoreManager.lookup(newValue);
        if (!this.sourceStore || !Ext.isObject(this.sourceStore) || !this.sourceStore.isStore)
            Ext.Error.raise({ msg: 'An invalid source store (' + newValue + ') was provided for ' + this.self.getName() });

        // Listen to source store events and copy model
        this.setModel(this.sourceStore.getModel());
        this.sourceStore.on({
            addrecords: 'sourceStoreAdded',
            removerecords: 'sourceStoreRemoved',
            refresh: 'sourceStoreChanged',
            scope: this
        });

        // Load the current data
        this.sourceStoreChanged();
    },
    updateFilter: function () {
        // Load the current data
        this.sourceStoreChanged();
    },

    ///////////////////////////////////////////////////////////////////////////
    // Store overrides

    fireEvent: function (eventName, me, record) {
        // Intercept update events, remove rather than update if record is no longer valid
        var filter = this.getFilter();
        if (filter && eventName === 'updaterecord' && !filter(record))
            this.remove(record);
        else
            this.callParent(arguments);
    },

    ///////////////////////////////////////////////////////////////////////////
    // Event handlers

    sourceStoreAdded: function (sourceStore, records) {
        var filter = this.getFilter();
        if (!filter)
            return;

        // Determine which records belong in this store
        var i = 0, len = records.length, record, newRecords = [];
        for (; i < len; i++) {
            record = records[i];

            // Don't add records already in the store
            if (this.indexOf(record) != -1)
                continue;

            if (filter(record))
                newRecords.push(record);
        }

        // Add the new records
        if (newRecords.length)
            this.add(newRecords);
    },
    sourceStoreRemoved: function (sourceStore, records) {
        this.remove(records);
    },
    sourceStoreChanged: function () {
        // Clear the store
        this.removeAll();

        var records = [],
            i, all, record,
            filter = this.getFilter();

        // No filter? No data
        if (!filter)
            return;

        // Collect and filter the current records
        all = this.sourceStore.getAll();
        for (i = 0; i < all.length; i++) {
            record = all[i];
            if (filter(record))
                records.push(record);
        }

        // Add the records to the store
        this.add(records);
    }
});

使用コードの例:

Ext.define('My.store.ActiveItems', {
    extend: 'Ext.data.FilteredStore',
    config: {
        sourceStore: 'Items',
        filter: function (record) { return record.get('IsActive'); }
    }
});

Answer 2

extjs 5 は、まさにこのシナリオのために連鎖ストアを追加しました

http://dev.sencha.com/ext/5.0.0/examples/kitchensink/#binding-chained-stores

Ext.define('KitchenSink.view.binding.ChainedStoresModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.binding.chainedstores',

stores: {
    everyone: {
        model: 'Person',
        data: KitchenSink.model.Person.generateData(15, 10)
    },
    adults: {
        source: '{everyone}',
        filters: [{
            property: 'age',
            value: 18,
            operator: '>='
        }],
        sorters: [{
            property: 'age',
            direction: 'ASC'
        }]
    }
}
});

Answer 3

これは不可能です。リストをストアに関連付けると、そのストアに加えられたすべての変更がリストに反映されます。それらは常に同期しています。ストアにフィルタを適用すると、そのストアの items[] 配列が変更され、そのストアに関連付けられているすべてのリストが変更されます。

(同様に、グラフを店舗に関連付けると、店舗が更新されるとチャートも自動的に更新されます。)

最初は同じデータで満たされている (そして維持されている) 2 つのストアがあり、その後、2 つのストアに異なるフィルターを適用することができます。

Answer 4

ストアにフィルタを適用してみてください。これはうまくいくかもしれません。

    var newstore=Ext.getStore("Store"); // If you have Store.js
    newstore.clearFilter();//clear previous filter
    newstore.filter('status', 'In');