How to create more than one JSON store from a get request?

1
votes

Lets suppose I have this web application built using extjs4 in my client-side and a Zend framework action controller in server-side. I have array of arrays in server-side that they could be output as JSON to the client.when i want to create only one store,usual way is working like this:

    Ext.define('MA.store.AdminResources', {
extend : 'Ext.data.Store',
fields : [ {
    name : 'id'
}, {
    name : 'name'
} ],
autoLoad : true,
proxy : {
    type : 'ajax',
    url : './account/adminresources',
    reader : {
        type : 'json'
        //,root : 'users'
    }
}

});

what if i wanted to create multiple JSON stores from just A single http request to the server? this server will not receive a remote proxy request per store and one request will be done for ALL stores. Here is an example of my JSON which is returned by server:

{
"adminsettings"{"userid":3333,"primaryemail":"[email protected]","firstname":"","middlename":null}
,"countries":{"AD":"Andorra","AE":"UnitedArabEmirates","AF":"Afghanistan"...}
,"languages":{"aa":"Afar","ab":"Abkhazian","ace":"Achinese","ach":"Acoli"...
}}

How can JSON stores for adminsettings,countries,languages be created with just one http request to the server? perhaps i need to define one proxy and 3 readers?!

2
javascriptjsonextjsextjs4
Are you asking how to format the JSON to represent multiple stores? – jfriend00
@jfriend00 actualy im asking how to process that JSON on client side to create multiple stores from that JSON. – Mehdi Fanai
In your JSON response, what pieces of data constitute a "store"? We don't know what that term means. I see one set of admin settings, and then a list of countries and a list of languages. Which of those pieces of data are a "store"? – jfriend00
He is referring to "store" in the Ext.data.Store sense. He wants to use ONE get request, and populate 2 (or more) Ext.data.Store's. I want the answer to this too. :) – LittleTreeX
You will need to define the fields; that is simply the way it works. You can actually send over more data than what gets put into the store (and there are probably use cases for this). Also, you should generally define your fields in a Model, and then point your store to said Model (especially if you are going to implement the SMVC paradigm). – LittleTreeX

2 Answers

5
votes

As you can see in the documentation you can define store without proxy:

Ext.create('Ext.data.Store', {
    model: 'User',
    data : [
        {firstName: 'Ed',    lastName: 'Spencer'},
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Jamie', lastName: 'Avins'}
    ]
});

then It's easy to make an ajax request and onSuccess to load data manualy:

Something like this:

adminSettings = Ext.create('Ext.data.Store', {model: AdminSettings});
countries = Ext.create('Ext.data.Store', {model: Country});

Ext.ajax.request({
    url: './account/adminresources',
    success: function(response) {
        var json = Ext.decode(response.responseText);
        adminsettings.loadData(json.adminsettings);
        countries.loadData(json.countries);
        //...
    } 
});
1
votes

While reading on extjs learning center grid faq i found the exact question and answer to my question. Here is the question and the answer:

Load multiple stores with one AJAX request?

There is also an example using XML here

display data to multiple data stores from a single json string that a returned as part of a single http request.

Option 1: (see this thread)

//create a JSON object:
{
dataStore1: /*1st json string */,
dataStore2: /*2nd json string */
}
//decode the json packet...
var json = Ext.decode(response.responseText);
//load the stores:
store1.loadData(json.dataStore1);
store2.loadData(json.dataStore2);

Option 2:

 //create a JSON object:
 {
 dataStore1: /*1st json string */,
 dataStore2: /*2nd json string */
 }
 //decode the json packet...
 var json = Ext.decode(response.responseText);
 //create new proxy data for stores as hendricd mentioned:
 store1.proxy.data = json.dataStore1;
 store2.proxy.data = json.dataStore2;
 //load stores
 store1.load();
 store2.load();

 //where stores' proxy has to be defined like this:
 proxy: new Ext.ux.data.BufferedPagingMemoryProxy([])
 //I guess this can be used in case someone is using PMP (paging memory proxy)