代码之家  ›  专栏  ›  技术社区  ›  Edwin

Extjs 4.1:Ext.data。存储记录不会加载到第二个Ext.data中。百货商店

  •  1
  • Edwin  · 技术社区  · 7 年前

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

    Store Manual

    data.products 变量

    知道我做错了什么吗?

    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>
    1 回复  |  直到 7 年前
        1
  •  1
  •   Edwin    7 年前

    显然,这两种设置:

    autoLoad: true,
    autoSync: true
    

    把整个商店搞砸了 load 有空记录(触发方式 loadRawData , loadRecords , clearFilter filter ).

    将这两个设置为 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>