Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 771
Gerald Avatar asked Dec 14 '12 15:12

Gerald


2 Answers

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

like image 75
sra Avatar answered Nov 15 '22 03:11

sra


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/

like image 24
lontivero Avatar answered Nov 15 '22 03:11

lontivero