ExtJS MVC無法從TreeStore綁定TreePanel（標準JSON服務器結構）

Question

在我的ExtJS應用程序（4.2.1）中，我的所有來自服務器的響應都具有默認結構。

我想從我的服務器方法填寫一個TreeStore，但我不能。

這是我的服務器JSON響應：

{ 
    "data": [ 
    { 
     "text": "Test 1", 
     "id": "1", 
     "leaf": true, 
     "cls": null, 
     "children": [ 
     { 
      "text": "Test 11", 
      "id": "11", 
      "leaf": true, 
      "cls": null, 
      "children": null 
     } 
     ] 
    }, 
    { 
     "text": "Test 2", 
     "id": "2", 
     "leaf": true, 
     "cls": null, 
     "children": null 
    }, 
    { 
     "text": "Test 3", 
     "id": "3", 
     "leaf": true, 
     "cls": null, 
     "children": null 
    }, 
    { 
     "text": "Test 4", 
     "id": "4", 
     "leaf": true, 
     "cls": null, 
     "children": null 
    }, 
    { 
     "text": "Test 5", 
     "id": "5", 
     "leaf": true, 
     "cls": null, 
     "children": null 
    } 
    ], 
    "message": "", 
    "num": 1, 
    "success": true, 
    "code": null 
} 

我TreeStore看起來是這樣的：

Ext.define('App.store.menu.ReportMenu', { 
    extend: 'Ext.data.TreeStore', 
    autoLoad: true, 
    requires: [ 
     'App.model.menu.ReportMenu', 
     'App.proxy.CustomProxy' 
    ], 

    model: 'App.model.menu.ReportMenu', 
    proxy: 
     { 
      type: 'customproxy', 
      api: { 
       read: '/api/Security/GetUserReportsMenu' 
      } 
     } 
}); 

我的模型看起來是這樣的：

Ext.define('App.model.menu.ReportMenu', { 
    extend: 'Ext.data.Model', 
    idProperty: 'id', 

    fields: [{ 
     name: 'text' 
    }, { 
     name: 'id' 
    }, { 
     name: 'leaf', 
     type: 'boolean' 
    }, { 
     name: 'cls' 
    }, { 
     name: 'children' 
    }], 

}); 

在我看來

而且我TreePanel是這一個：

{ 
xtype: 'treepanel', 
      title: 'Reports List', 
      itemId: 'rptList', 
      glyph: Glyphs.LIST, 
      width: 300, 
      border: 1, 
      store: Ext.create('App.store.menu.ReportMenu'), 
      displayField: 'text', 
      useArrows: false, 
      rootVisible: true, 
} 

這是我可以在我的TreePanel中唯一看到的：

什麼我做錯了任何線索？我無法更改服務器JSON響應結構，因爲它是整個應用程序中的標準。

Answer 1

在你前面的代碼所缺少讀者在代理：

Ext.define('App.store.menu.ReportMenu', { 
    extend: 'Ext.data.TreeStore', 
    autoLoad: true, 
    requires: [ 
     'App.model.menu.ReportMenu', 
     'App.proxy.CustomProxy' 
    ], 

    model: 'App.model.menu.ReportMenu', 
    proxy: 
     {    
      type: 'customproxy', 
      api: { 
       read: '/api/Security/GetUserReportsMenu' 
      } 
     } 
    } 
); 

後插入讀者定義代碼：

Ext.define('App.store.menu.ReportMenu', { 
    extend: 'Ext.data.TreeStore', 
    autoLoad: true, 
    requires: [ 
     'App.model.menu.ReportMenu', 
     'App.proxy.CustomProxy' 
    ], 

    model: 'App.model.menu.ReportMenu', 
    proxy: 
     { 

      type: 'customproxy', 
      api: { 
       read: '/api/Security/GetUserReportsMenu' 
      }, 
      reader:{ 
       type:'json' 
       ,root:'data' 
      } 
     } 
);