2017-08-29 1 views
1

J'ai le modèle et le magasin suivants dans mon application.Extjs 4.1: Les enregistrements Ext.data.Store ne sont pas chargés dans le second Ext.data.Store

Mon problème est que lorsque j'essaie de charger les enregistrements dans le second magasin, cela ne fonctionne pas. J'ai essayé différentes méthodes de magasin et rien (Store Manual).

Dans mon application, les premiers enregistrements du magasin sont chargés dans un contrôleur, où un appel Ajax reçoit la variable data.products.

Des idées que je fais mal?

PS: J'utilise 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>

Répondre

1

Apparemment, ces deux paramètres:

autoLoad: true, 
autoSync: true 

vis tout le magasin et les appels load avec des enregistrements vides (déclenchés par loadRawData, loadRecords, clearFilter, filter).

Après avoir défini ces deux à false le chargement se produit uniquement sur appel explicite aux méthodes de chargement.

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>