CODEWITHSUNDEEP
extjsgridextjs4storeextjs4.1
Gerald
Gerald

Reputation: 131

Store with MixedCollection data

Is it possible to do this process in ExtJS 4.1.x ? 

var myMixedCollection = myStore.queryBy(...);
var anotherStore = Ext.create('Ext.data.Store', { data: myMixedCollection, ... });
var myGrid = Ext.create('Ext.grid.Panel', { store: anotherStore, ... });

Because my grid displays nothing or just one empty line.
When I log my myMixedCollection there is no problem all data are here but when I open my anotherStore with Firebug i can see there is only one empty line in my data store.

Upvotes: 5

Views: 2379

Answers (2)

lontivero
lontivero

Reputation: 5275

Yes, it is possible.

Try this:

//this is the model we will be using in the store
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',    type: 'int'},
        {name: 'name',  type: 'string'},
        {name: 'phone', type: 'string', mapping: 'phoneNumber'}
    ]
});

var data = new Ext.util.MixedCollection();
data.add('key1', {
    id: 1,
    name: 'Ed Spencer',
    phoneNumber: '555 1234'
});
data.add('key2', {
    id: 2,
    name: 'Abe Elias',
    phoneNumber: '666 1234'
});

//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
    model: 'User',
    data : data.items,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

store.each(function(record){
    console.log(record.get("name"));
});

​You can see it woking on jsfiddle here: http://jsfiddle.net/lontivero/Lf9yv/1/

Upvotes: 2

sra
sra

Reputation: 23975

myMixedCollection will be a collection of records (model instances) and as long as the new store hast the same model set this will work! So the answer is Yes

Well, for sure you need to call getRange() on the myMixedCollection instance

Here is a working example

 // Set up a model to use in our Store
 Ext.define('Simpson', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'name', type: 'string'},
         {name: 'email', type: 'string'},
         {name: 'phone', type: 'string'}
     ]
 });

var s1 = Ext.create('Ext.data.Store', {
    model:'Simpson',
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var mixed = s1.queryBy(function(rec){
     if(rec.data.name == 'Lisa')
         return true;
});

var s1 = Ext.create('Ext.data.Store', {
    model:'Simpson',
    storeId:'simpsonsStore2',
    fields:['name', 'email', 'phone'],
    data: mixed.getRange(),
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore2'),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

and the JSFiddle

Upvotes: 7

Related Questions