javascript - Sencha : Two lists showing different content from the same store. 可能吗？

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'); }
    }
});