javascript - Sencha：两个列表显示来自同一商店的不同内容。可能的？

Question

说，我们在商店里有这个：

[
    {
        name: 'Criteria 1',
        status: 'In'
    },
    {
        name: 'Criteria 2',
        status: '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[] 数组会更改，这将更改附加到该商店的任何列表。

（类似地，如果将图表绑定到商店，图表会随着商店的更新而自动更新。）

您可以有两个最初使用相同数据填充（和维护）的商店，然后对这两个商店应用不同的过滤器。

Answer 4

尝试将过滤器应用于商店。可能这会奏效。

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