Treestore爲空 - JSON有效嗎？

Question

我的代碼看起來像這樣，但商店/樹中沒有數據。

JSON存儲有效嗎？我是否需要在JSON頂部的root？

樹面板中必須定義哪些列？

JSON：

{ 
    "status" : { 
     "status" : 0, 
     "msg" : "Ok", 
     "protocolversion" : "1.1.json" 
    }, 
    "value" : { 
     "name" : "Root", 
     "path" : "\/", 
     "leaf" : false, 
     "children" : [ 
      { 
       "name" : "subfolder1", 
       "path" : "\/subfolder1", 
       "leaf" : false, 
       "children" : [] 
      }, 
      { 
       "name" : "subfolder2", 
       "path" : "\/subfolder2", 
       "leaf" : false, 
       "children" : [] 
      }, 
      { 
       "name" : "report1", 
       "path" : "\/report1", 
       "leaf" : true, 
       "children" : [] 
      } 
     ] 
    } 
} 

我的ExtJS的代碼：

型號：

// Model for store 
    var oModel = Ext.define('TreeModel', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'name',   type: 'string' }, 
      { name: 'path',   type: 'string' } 
     ] 
    }); 

商店：

 // Store with local proxy 
    var oStore = Ext.create('Ext.data.TreeStore', { 
     model: oModel, 
     autoLoad: true, 
     proxy: { 
      type : 'ajax', 
      url : './data/response.json' 
     }, 
     reader: { 
      type : 'json', 
      root : 'value' 
     } 
    }); 

TreePanel中：

 // View with TreePanel 
    var oTreePanel = Ext.create('Ext.tree.Panel', { 
     store  : oStore, 
     useArrows : true, 
     displayField: 'text', 
     rootVisible : true, 
     multiSelect : true, 
     border  : 0, 
     columns  : [ 
      { 
       xtype : 'treecolumn', 
       dataIndex: 'name', 
       text  : 'Tree', 
       flex  : 3 
      }, 
      { 
       dataIndex: 'path', 
       text  : 'Path', 
       flex  : 2 
      } 
     ] 
    }); 

Answer 1

你需要在你的JSON和你的讀者的根本改變value到children。

思考的方式是這樣的：讀者的根告訴讀者記錄數據在哪裏開始。但是因爲樹數據是嵌套的（一個節點可以有子節點），ExtJS在每個節點內查找另一個根（然後在這個後一個節點內的另一個根，等等）。

因此，如果您呼叫讀者的根'子女'，它將找到節點中的子節點，如果它具有children節點。

你可以同樣稱它爲'subs'或'whatever';你只需要確保在整個層次結構中使用相同的東西，包括json數據的根。

Answer 2

這裏是一棵樹面板我能夠用 '數據' 爲孩子獲得MVC結構功能的例子：

JSON：

Ext.data.JsonP.callback4({ 
    "message": "", "data": [ 
     { 
      "descr": "TEST REASON", 
      "leaf": false, 
      "data": [ 
      { 
       "descr": "TEST REASON", 
       "leaf": true, 
       "data": null 
      } 
      ] 
     }, 
     { 
      "descr": "Another Type Code", 
      "leaf": false, 
      "data": [] 
     }, 
     { 
      "descr": "Quite A Different One I Think", 
      "leaf": false, 
      "data": [ 
      { 
       "descr": "A Child Of That", 
       "leaf": true, 
       "data": null 
      } 
      ] 
     } 
    ] 
}) 

MODEL：

Ext.define('App.model.treePanel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: 'descr', type: 'auto' }, 
     { name: 'leaf', type: 'auto' } 
    ], 
    proxy: { 
     type: 'jsonp', 
     url: 'yourURL', 
     //extraParams: { 
     //}, 
     headers: { 'Content-type': 'text/json; charset=utf-8', 'Accepts': 'text/json' }, 
     reader: { 
      type: 'json', 
      root: 'data', 
      successProperty: 'success' 
     } 
    } 
}); 

STORE：

Ext.define('App.store.treePanels', { 
    extend: 'Ext.data.TreeStore', 
    model: 'App.model.treePanel' 
}); 

VIEW：

Ext.define('App.view.treePanel', { 
    extend: 'Ext.tree.Panel', 
    xtype:'treePanel', 
    title: 'My Items', 
    store: 'treePanels', 
    rootVisible: false, 
    //hideHeaders:true, 
    columns: [ 
     { 
      xtype: 'treecolumn', 
      dataIndex: 'descr', 
      text: 'Current Types and Reasons', 
      flex: .5 
     } 
    ], 
    tbar:{ 
     items: [ 
      { 
       xtype: 'button', 
       text: 'Remove Item' 
      }, 
      { 
       xtype: 'button', 
       text:'Edit Item' 
      } 
      ] 
    } 
}); 

請注意：rootVisible:false被要求。