从 json 加载数据

Question

我有可用的数据，我想像这样加载：

{
"success": true,
"message": null,
"total": null,
"data": [{
    "clockTypes": ["_12", "_24"],
    "speedTypes": ["MPH", "KMPH"],
    "scheduleTypes": ["DEFAULT", "AUTO"]
}]}

我通常会像这样加载数据

Ext.define('MyApp.store.comboTimezone', {
extend: 'Ext.data.Store',

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: true,
        storeId: 'MyJsonStore5',
        proxy: {
            type: 'ajax',
            url: 'json/timezone.json',
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    }, cfg)]);
}});

现在我是否将时钟类型作为我的组合框中的一条记录。如何在我的组合框中获得两条记录：_12 和 _24？

Answer 1

您的root 应该是...data.clockTypes 我-认为-（虽然我不确定这是否可行。）

劫持 ajax 调用来加载数据有点尴尬，因为这不是商店消费的真正正确格式（是吗？）

理想情况下你想要...

{
"success": true,
"message": null,
"total": null,
"data": [{
   name: "_12", name:"_24"]
}]}

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
    autoLoad: true,
    storeId: 'MyJsonStore5',
    valueField:'name',
    displayField:'name',
    proxy: {
        type: 'ajax',
        url: 'json/timezone.json',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
}, cfg)]);
}});

虽然这确实意味着您最终会得到更多的 ajax 调用。或者，如果你已经下定决心从 1 个 ajax 调用中填充 3 个组合框（我有点猜这是你想要做的），那么你需要根据来自的数据动态生成商店 一个 Ext.request()

但是，如果您不能弄乱数据，那么我们可以...

    Ext.define('MyApp.store.comboTimezone', {
    extend: 'Ext.data.Store',

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        Ext.define('TZ', extend: 'Ext.data.Model',
        fields: [{
            name: 'name'
        }])
        me.callParent([Ext.apply({
            autoLoad: true,
            model: 'TZ',
            storeId: 'MyJsonStore5',
            proxy: {
                type: 'ajax',
                url: 'json/timezone.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        }, cfg)]);
        //hacky, but works i guess
        Ext.Ajax.request({
            url: 'my.json',
            success: function(response) {
                var text = response.responseText;
                var json = Ext.JSON.decode(text);
                for(var i =0);i<json.data.lenght();i++;){
                    Ext.data.StoreManager.lookup('MyJsonStore5').add(Ext.create('TZ',{name:json.data[i]}))
                }
            }
        });
    }
});

*避免产生错误的错别字。

基本上，您调用 url，将数据作为原始 json 获取，然后将其处理为您的商店可以读取的格式。

不幸的是，这有点像 hack。