Question

我想使用服务器提供的数据制作嵌套的购物类别列表，如下所示：

{
    "status":{"statusCode":15001},
    "data":[
        {"itemId":1, "name":"Men", "subCategories":[
            {"itemId":2, "name":"Clothes", "subCategories":[
                {"itemId":3, "name":"Formals", "leaf":true,"subCategories":[]},
                {"itemId":4, "name":"Casual", "leaf":true,"subCategories":[]},
                {"itemId":5, "name":"Sports", "leaf":true,"subCategories":[]}
            ]},
            {"itemId":6, "name":"Accessories", "subCategories":[
                {"itemId":7, "name":"Formals", "leaf":true,"subCategories":[]},
                {"itemId":8, "name":"Casual", "leaf":true,"subCategories":[]},
                {"itemId":9, "name":"Sports", "leaf":true,"subCategories":[]}
            ]}
        ]},
        {"itemId":10, "name":"Women", "subCategories":[
            {"itemId":11, "name":"Clothes", "subCategories":[
                {"itemId":12, "name":"Formals", "leaf":true,"subCategories":[]},
                {"itemId":13, "name":"Casual", "leaf":true,"subCategories":[]},
                {"itemId":14, "name":"Ethnic", "leaf":true,"subCategories":[]}
            ]},
            {"itemId":15, "name":"Shoes", "subCategories":[
                {"itemId":16, "name":"Hells", "leaf":true,"subCategories":[]},
                {"itemId":17, "name":"Wedges", "leaf":true,"subCategories":[]},
                {"itemId":18, "name":"Sports", "leaf":true,"subCategories":[]}
            ]}
        ]}
    ]
}

由于树结构包含在data元素中，并且子节点包含在subCategories标记中，这与data不同，所以我想预先处理这些数据，以便可以使用它通过Nested List直接通过这样的回复：

{
    "categories":[
        {"itemId":1, "name":"Men", "categories":[
            {"itemId":2, "name":"Clothes", "categories":[
                {"itemId":3, "name":"Formals", "leaf":true,"categories":[]},
                {"itemId":4, "name":"Casual", "leaf":true,"categories":[]},
                {"itemId":5, "name":"Sports", "leaf":true,"categories":[]}
            ]},
            {"itemId":6, "name":"Accessories", "categories":[
                {"itemId":7, "name":"Formals", "leaf":true,"categories":[]},
                {"itemId":8, "name":"Casual", "leaf":true,"categories":[]},
                {"itemId":9, "name":"Sports", "leaf":true,"categories":[]}
            ]}
        ]},
        {"itemId":10, "name":"Women", "categories":[
            {"itemId":11, "name":"Clothes", "categories":[
                {"itemId":12, "name":"Formals", "leaf":true,"categories":[]},
                {"itemId":13, "name":"Casual", "leaf":true,"categories":[]},
                {"itemId":14, "name":"Ethnic", "leaf":true,"categories":[]}
            ]},
            {"itemId":15, "name":"Shoes", "categories":[
                {"itemId":16, "name":"Hells", "leaf":true,"categories":[]},
                {"itemId":17, "name":"Wedges", "leaf":true,"categories":[]},
                {"itemId":18, "name":"Sports", "leaf":true,"categories":[]}
            ]}
        ]}
    ]
}

为此，我覆盖了getResponseData的读者，但这种方法永远不会被调用，并且没有记录在商店中加载。我究竟做错了什么？

这是我的商店：

Ext.define('MyTabApp.store.CategoriesStore',{
    extend:'Ext.data.TreeStore',
    config:{
        model   : 'MyTabApp.model.Category',
        autoLoad: false,
        storeId : 'categoriesStore',
        proxy: {
            type: 'ajax',
            url: Properties.CONFIG_SERVICE_BASE_URL+'topnav/getall',
            reader: {
                type: 'json',
                getResponseData: function(response) {
                    console.log("in getResponseData"); // Never logged in console
                    var rText = response.responseText;
                    var processed = Helper.replaceAll("data","categories",rText);
                    processed = Helper.replaceAll("subCategories","categories",processed);
                    var respObj = Ext.JSON.decode(processed);
                    return respObj.categories;
                }
            }
        },
        listeners:{
            load: function( me, records, successful, operation, eOpts ){ 
                console.log("categories tree loaded");
                console.log(records); // This prints blank array
            }
        }
    }
});

这是模特：

Ext.define('MyTabApp.model.Category', {
    extend : 'Ext.data.Model',
    config : {
        idProperty  : 'itemId',
        fields      : [ 
           {name : 'itemId',type : 'int'}, 
           {name : 'name',type : 'string'}
        ]
    }
});

这是清单：

Ext.define('MyTabApp.view.CategoriesList', {
    extend: 'Ext.dataview.NestedList',
    alias : 'widget.categorieslist',
    config: {
        height              : '100%',
        title               : 'Categories',
        displayField        : 'name',
        useTitleAsBackText  : true,
        style               : 'background-color:#999 !important; font-size:75%',
        styleHtmlContent    : true,
        listConfig: {
            itemHeight: 47,
            itemTpl : '<div class="nestedlist-item"><div style="position:absolute; left:10px; top:10px; color:#222; font-size:130%">{name}</div></div>',
            height : "100%"
        }
    },
    initialize : function() {
        this.callParent();
        var me = this;

        var catStore = Ext.create('MyTabApp.store.CategoriesStore');
        catStore.load();
        me.setStore(catStore);
    }
});

处理和处理的最佳做法是什么？格式化接收数据，如果它不是我们想要的格式，我们无法控制服务？

Answer 1

我认为你不能将getResponseData附加到读者的配置中。在过去，我使用了以下方法。

如下所示创建Ext.data.reader.Json的覆盖。但缺点是，使用json reader会调用所有代理。然后在应用程序的requires部分添加YourApp.override.data.reader.Json。

Ext.define('YourApp.override.data.reader.Json', { override: 'Ext.data.reader.Json', 'getResponseData': function(response) { // your implementation here }
或者，您可以创建Ext.Ajax.request并在成功处理程序上按照您希望的方式解析数据，然后在商店中设置数据。您也可以在商店的“refresh”事件或“beforeload”事件中编写此代码，并返回false以取消操作

重新格式化JSON数据以适合树存储

1 个答案: