Question

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

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

我们需要在一个列表中显示In的条件，在该商店中显示另一个列表中的Out。有可能吗？

View structure

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

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

4 个答案: