如何从一个 get 请求创建多个 JSON 存储？答案

【问题标题】：How to create more than one JSON store from a get request?如何从一个 get 请求创建多个 JSON 存储？
【发布时间】：2011-09-03 15:52:37
【问题描述】：

假设我在客户端使用 extjs4 构建了这个 Web 应用程序，在服务器端使用 Zend 框架动作控制器。我在服务器端有一组数组，它们可以作为 JSON 输出到客户端。当我只想创建一个商店时，通常的方式是这样的：

    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'
    }
}

});

如果我想从对服务器的单个 http 请求创建多个 JSON 存储怎么办？此服务器不会收到每个商店的远程代理请求，并且将为所有商店完成一个请求。这是服务器返回的 JSON 示例：

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

如何通过向服务器发送一个 http 请求来创建用于管理设置、国家/地区、语言的 JSON 存储？也许我需要定义一个代理和 3 个阅读器？！

【问题讨论】：

您是在问如何格式化 JSON 以表示多个商店？
@jfriend00 实际上我在询问如何在客户端处理该 JSON 以从该 JSON 创建多个商店。
在您的 JSON 响应中，哪些数据构成“存储”？我们不知道这个词是什么意思。我看到一组管理员设置，然后是国家列表和语言列表。哪些数据是“存储”？
他指的是 Ext.data.Store 意义上的“存储”。他想使用一个获取请求，并填充 2 个（或更多）Ext.data.Store。我也想要这个问题的答案。 :)
您需要定义字段；这就是它的工作方式。实际上，您可以发送比放入存储中的数据更多的数据（并且可能有这方面的用例）。此外，您通常应该在模型中定义您的字段，然后将您的商店指向所述模型（特别是如果您要实现 SMVC 范例）。

标签： javascript json extjs extjs4

【解决方案1】：

正如您在文档中看到的，您可以在没有代理的情况下定义商店：

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

然后很容易发出ajax请求和onSuccess手动加载数据：

类似这样的：

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);
        //...
    } 
});

【讨论】：

感谢您非常有用的回答。您知道我可以将您的代码放在 MVC 应用程序中的什么位置吗？放在模型文件或商店或其他地方？
只需扩展 Ext.app.Controller。如果您只需要显示数据，请将其放入 init 方法中。在其他情况下，您可以在控制器中定义一个函数并在需要刷新数据时调用它。
如果在您的示例中，adminSettings 存储在带有分页的网格中使用，您如何设置分页工具栏将使用的 adminSettings 存储的总数？
您应该为您的商店定义具有总属性映射的阅读器，并且 json.adminsettings 应该包含总数据。例如store: adminSettings = Ext.create('Ext.data.Store', { model: AdminSettings, proxy: {type: 'memory',reader: {type: 'json',root: 'settings', totalProperty: 'cnt' }} }); json: { "cnt": 100, "success": true, "settings": [] }

【解决方案2】：

在阅读extjs learning center grid faq 时，我找到了确切的问题并回答了我的问题。这是问题和答案：

使用一个 AJAX 请求加载多个商店？

还有一个使用XML的例子here

从作为单个 http 请求的一部分返回的单个 json 字符串向多个数据存储显示数据。

选项 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);

选项 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)

【讨论】：