javascript - Extjs 4.1 : Ext. data.Store 记录没有加载到第二个 Ext.data.Store

Question

我的应用程序中有以下模型和商店。

我的问题是，当我尝试将记录加载到第二个存储区时，它不起作用。我尝试了不同的存储方法，但没有尝试 ( Store Manual )。

在我的应用程序中，第一条商店记录加载到 Controller 中，其中 Ajax 调用接收 data.products 变量。

知道我做错了什么吗？

PS:我使用的是 ExtJs 4.1

Fiddle sencha

Ext.define('App.model.Product', {
    extend: 'Ext.data.Model',
    alias: 'model-product',
    idgen: 'sequential',
    fields: [
        { name: 'available', type: 'boolean', useNull: false, defaultValue: true },
        { name: 'country', type: 'int', useNull: false },
        { name: 'key', type: 'string', useNull: false },
        { name: 'name', type: 'string', useNull: false }
    ],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'products'
        }
    }
});

Ext.define('App.store.Product', {
    extend: 'Ext.data.Store',
    autoLoad: true,
    autoSync: true,
    groupField: 'id',
    countryFilter: function(countryId) {
        this.clearFilter();
        this.filter('country', countryId);
        return this;
    },
    getRecordsForCountry: function (countryId) {
        var records = [];
        this.findBy(function (record) {
            if (record.get('country') === countryId) {
                records.push(record.copy());
            }
        });
        return records;
    },
    model: 'App.model.Product',
    sorters: [ {
        property: 'key',
        direction: 'ASC'
    } ],
    sortOnLoad: true
});

Ext.onReady(function () {
    var data = {
        products: [{
            country: 1,
            key: 'test1',
            name: 'Test1'
        }, {
            country: 2,
            key: 'test2',
            name: 'Test2'
        }, {
            country: 3,
            key: 'test3',
            name: 'Test3'
        }]
    };

    var store = Ext.create('App.store.Product');
    store.loadRawData(data, false);
  
    var store2 = Ext.create('App.store.Product'),
    records = store.getRecordsForCountry(1);
    store2.add(records);
    //tried also:
    //store2.loadRecords(records);
    //store2.loadData(records);
    //store2.loadRawData(records);

    var combobox = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        forceSelection: true,
        displayField: 'name', // <-- Add this 
        valueField: 'key',
        renderTo: Ext.getBody(),
        store: store
    });
    var combobox2 = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        forceSelection: true,
        displayField: 'name', // <-- Add this 
        valueField: 'key',
        renderTo: Ext.getBody(),
        store: store2
    });
});

<link href="http://docs.sencha.com/extjs/4.1.1/extjs-build/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.1.1/ext-all.js"></script>

Answer 1

显然这两个设置:

autoLoad: true,
autoSync: true

搞砸了整个存储并用空记录调用load(由loadRawData、loadRecords、clearFilter触发, 过滤器).

将这两个设置为 false 后，加载仅在显式调用加载方法时发生。

Ext.define('App.model.Product', {
    extend: 'Ext.data.Model',
    alias: 'model-product',
    idgen: 'sequential',
    fields: [
        { name: 'available', type: 'boolean', useNull: false, defaultValue: true },
        { name: 'country', type: 'int', useNull: false },
        { name: 'key', type: 'string', useNull: false },
        { name: 'name', type: 'string', useNull: false }
    ],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'products'
        }
    }
});

Ext.define('App.store.Product', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    autoSync: false,
    groupField: 'id',
    countryFilter: function(countryId) {
        this.clearFilter();
        this.filter('country', countryId);
        return this;
    },
    getRecordsForCountry: function (countryId) {
        var records = [];
        this.findBy(function (record) {
            if (record.get('country') === countryId) {
                records.push(record.copy());
            }
        });
        return records;
    },
    model: 'App.model.Product',
    sorters: [ {
        property: 'key',
        direction: 'ASC'
    } ],
    sortOnLoad: true
});

Ext.onReady(function () {
    var data = {
        products: [{
            country: 1,
            key: 'test1',
            name: 'Test1'
        }, {
            country: 2,
            key: 'test2',
            name: 'Test2'
        }, {
            country: 3,
            key: 'test3',
            name: 'Test3'
        }]
    };

    var store = Ext.create('App.store.Product');
    store.loadRawData(data, false);
  
    var store2 = Ext.create('App.store.Product'),
    records = store.getRecordsForCountry(1);
    store2.add(records);
    //tried also:
    //store2.loadRecords(records);
    //store2.loadData(records);
    //store2.loadRawData(records);

    var combobox = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        forceSelection: true,
        displayField: 'name', // <-- Add this 
        valueField: 'key',
        renderTo: Ext.getBody(),
        store: store
    });
    var combobox2 = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        forceSelection: true,
        displayField: 'name', // <-- Add this 
        valueField: 'key',
        renderTo: Ext.getBody(),
        store: store2
    });
});

<link href="http://docs.sencha.com/extjs/4.1.1/extjs-build/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.1.1/ext-all.js"></script>