Extjs 4.1: Ext.data.Store records are not loaded into second Ext.data.Store

Question

I have the following model and store in my app.

My problem is that when I'm trying to load the records into the second store it doesn't work. I've tried different store methods and nothing (Store Manual).

In my app the first store records are loaded in a controller, where an Ajax call receives the data.products variable.

Any ideas what I'm doing wrong?

PS: I'm using 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

Apparently these two settings:

autoLoad: true,
autoSync: true

screws the whole store up and calls load with empty records (triggerd by loadRawData, loadRecords, clearFilter, filter).

After setting these two to false the loading happens only on explicit call to the load methods.

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>