Question

我正在获取嵌套数据以显示为嵌套列表但是每当我点击顶级项目时，它再次显示相同的顶级列表而不是显示子列表，并且会触发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);
    }
});

如果我移除data顶部categories数组上的rootProperty包装并将categories更改为data.categories而不是{{1>，则每次点按时列表都会正常运行而不会发出任何ajax请求}}。由于服务器实际上在categories对象中返回data，我无法将其删除，因此在这种情况下如何修复商店？另外为什么要获取文件的附加ajax请求？

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

Answer 1

上次我有这种确切的情况，这是因为我的一个顶级类别是一片叶子，但我没有设置leaf：true。这样做可以回想起嵌套列表的顶层，就好像它是一个孩子一样。

Answer 2

从您的小提琴看来，如果您的数据采用以下格式，则可以正常使用：

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

也就是说，只需删除“数据”属性并制作defaultRootProperty: 'categories'＆amp; rootProperty: 'categories'。检查一下：http://www.senchafiddle.com/#d16kl#tIhTp

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

如果嵌套数据低于一级，如何为其指定rootProperty？

2 个答案: