1

我正在获取要显示为嵌套列表的嵌套数据，但是每当我点击顶级项目时，它会再次显示相同的顶级列表而不是显示子列表，并且会触发 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. 由于服务器实际上是categories在返回data对象，所以我无法将其删除，那么在这种情况下如何修复商店？另外，为什么还有额外的 ajax 请求来获取文件？

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

4

2 回答 2

1

从您的 Fiddle 看来，如果您的数据采用以下格式，则可以正常工作：

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

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

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

于 2013-06-04T06:42:58.210 回答
1

上次我遇到这种情况，是因为我的顶级类别之一是叶子，但我没有设置叶子：真。这样做会回忆嵌套列表的顶层，就好像它是一个孩子一样。

于 2013-05-31T19:09:37.813 回答