Extjs 4.1：Ext.data.Store记录未加载到第二个Ext.data.Store中

Question

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

我的问题是，当我试图将记录加载到第二个商店时，它不起作用。我尝试了不同的商店方法而没有尝试（Store Manual）。

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

任何想法我做错了什么？

PS：我正在使用ExtJs 4.1

Fiddle sencha

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

显然这两个设置：

autoLoad: true,
autoSync: true

将整个商店搞砸，并使用空记录调用load（由loadRawData，loadRecords，clearFilter，filter触发。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;