1

ネストされたリストとして表示されるネストされたデータをフェッチしていますが、トップレベルのアイテムをタップすると、子リストを表示する代わりに同じトップレベルのリストが再び表示され、JSON データを再度フェッチするために ajax リクエストが起動されます。店舗はこちら：

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ラッパーを削除し、代わりにに変更すると、各タップで ajax リクエストなしでリストが適切に機能し始めます。サーバーは実際にはオブジェクトで返されているため、削除することはできません。その場合、ストアを修正するにはどうすればよいですか? また、ファイルをフェッチするための追加の ajax リクエストが必要なのはなぜですか?categoriesrootPropertycategoriesdata.categoriescategoriesdata

[編集] フィドル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 に答える