如果嵌套数据低于一级，如何指定rootProperty？ [英] How to specify rootProperty for nested data if it is one level below?

问题描述

我正在获取要显示为嵌套列表的嵌套数据，但每当我点击顶级项时，它都会再次显示相同的顶级列表，而不是显示子列表，并且会触发一个AJAX请求来再次获取json数据。这是商店：

Ext.define('MyTabApp.store.CategoriesStore',{
    extend:'Ext.data.TreeStore',
    config:{
        model   : 'MyTabApp.model.Category',
        autoLoad: false,
        storeId : 'categoriesStore',
        proxy: {
            type: 'ajax',
            url: 'resources/data/catTree.json',
            reader: {
                type: 'json',
                rootProperty: 'data.categories'
            }
        },
        listeners:{
            load: function( me, records, successful, operation, eOpts ){ 
                console.log("categories tree loaded");
                console.log(records);
            }
        }
    }
});

下面是我用来模拟服务的文件中的数据：

{
    "data":{
        "categories": [
            {
                "name": "Men",
                "categories": [
                    {
                        "name": "Footwear",
                        "categories": [
                            { "name": "Casual Shoes", "leaf": true },
                            { "name": "Sports Shoes", "leaf": true }
                        ]
                    },
                    {
                        "name": "Clothing",
                        "categories": [
                            { "name": "Casual Shirts", "leaf": true },
                            { "name": "Ethnic", "leaf": true }
                        ]
                    },
                    { "name": "Accessories", "leaf": true }
                ]
            },
            {
                "name": "Women",
                "categories": [
                    { "name": "Footwear", "leaf": true },
                    { "name": "Clothing", "leaf": true },
                    { "name": "Accessories", "leaf": true  }
                ]
            },
            {
                "name": "Kids",
                "categories": [
                    {
                        "name": "Footwear",
                        "categories": [
                            { "name": "Casual Shoes", "leaf": true },
                            { "name": "Sports Shoes", "leaf": true }
                        ]
                    },
                    { "name": "Clothing", "leaf": true }
                ]
            }
        ]
    }
}

这是列表：

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>{name}</div></div>',
            height : "100%"
        }
    },
    initialize : function() {
        this.callParent();
        var me = this;

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

如果我删除了顶部categories数组上的data包装器，并将rootProperty更改为categories而不是data.categories，则列表开始正常工作，而不是每次点击时都有任何AJAX请求。由于服务器实际上在data对象中返回categories，所以我无法删除它，那么在这种情况下如何修复存储呢？另外，为什么需要额外的AJAX请求来获取文件？

[编辑] 尝试创建一个类似但不同的小提琴http://www.senchafiddle.com/#d16kl，因为它使用的是2.0.1，并且数据不是从外部文件或服务器加载的。

推荐答案

您的提琴似乎认为，如果您的数据采用以下格式，则可以很好地工作：

{
  "categories" : [{
    "name" : "Foo",
    "categories" : [{
       ...
     }]
  }]
}

也就是说，只需删除"data"属性并使defaultRootProperty: 'categories'&；rootProperty: 'categories'。检查：http://www.senchafiddle.com/#d16kl#tIhTp

它也适用于外部数据文件。

这篇关于如果嵌套数据低于一级，如何指定rootProperty？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！