ExtJS5加載JSON到TreePanel中

我已經做了很多尋找答案和測試的，但似乎無法得到TreePanel中在我的顯示JSON樹數據我正在主視圖。我希望有人能說出我做錯了或沒有正確使用的東西。ExtJS5加載JSON到TreePanel中

這裏是我的代碼：

Tree.json

{ 
"message": "SUCCESS", 
"details": { 
    "text": "Categories", 
    "expanded": "true", 
    "leaf": "false", 
    "children": [ 
     { 
      "text": "Child 1", 
      "leaf": "true" 
     }, 
     { 
      "text": "Child 2", 
      "leaf": "true" 
     }, 
     { 
      "text": "Child 3", 
      "expanded": "true", 
      "leaf": "false", 
      "children": [ 
       { 
        "text": "Grandchild", 
        "leaf": "true" 
       } 
      ] 
     } 
    ] 
} 
}

Model.js

Ext.define('MyApp.model.Model',{ 
extend: 'Ext.data.TreeModel', 

requires: ['Ext.data.Field'], 

fields:['text'] 

});

Models.js

Ext.define('MyApp.store.Models',{ 
extend: 'Ext.data.TreeStore', 
alias: 'store.models', 
model: 'MyApp.model.Model', 

autoLoad: true, 

proxy: { 
    type: 'ajax', 
    url: 'data/Tree.json', 
    reader: { 
     type: 'json', 
     rootProperty: 'details' 
    } 
});

View.js（摘錄）

xtype: 'treepanel', 
     maxWidth: 300, 
     minWidth: 150, 
     store: { 
      type: 'models', 
     }, 
     rootVisible: false

在我看來，我看到一個空的樹。當我將rootProperty設置爲'details'時，Chrome的Developer Tools和Firebug中的Network選項卡顯示無限請求我的json，但沒有加載到視圖中。

任何指向我正確的方向將是非常有益的！因爲語法看起來都是正確的，所以我想不出任何我錯了，所以我已經走到了死衚衕。

謝謝！

編輯：當我在視圖中創建內嵌存儲時，我能夠加載json數據，但不能從單獨的store.js文件中加載。我也改變了存儲庫初始化像這樣：

store: Ext.create('Ext.data.TreeStore',{ 
      fields:['name', 'description'], 
      proxy: { 
       type: 'ajax', 
       url: 'data/Categories.json', 
       reader: { 
        type: 'json', 
        rootProperty: 'children' 
       } 
      }, 
}

我也改變了我的JSON的字段從「細節」，以「孩子」，這是能夠顯示。這可能不會與我的要求相匹配，但我會採取我現在可以獲得的內容（與我想要的和內聯商店創建不同的JSON格式）。

任何進一步的幫助，將不勝感激！

來源

2017-01-31 aaron

我可以通過不使用TreeStore的自動加載來繞過這個問題。

由於我的要求所需的JSON有特定的格式，我不能使用TreeStore與代理，因爲它是，因爲它會期望從該節點的所有孩子屬性具有相同的名稱。

相反，我在我的商店使用autoLoad: false，並增加了afterrender我的主要觀點。此afterrender函數觸發事件併爲JSON響應執行Ajax GET請求。從這裏開始，我處理JSON響應並提取樹數據，然後將數據加載到我的TreeStore中。通過這種方式，我可以靈活處理JSON的格式（並能夠在單個請求中發送更多信息），同時仍然可以訪問我需要的TreeStore。

這裏是一個加載存儲數據我寫的函數（注意，我身邊改變了我的JSON的格式，但基礎仍不這裏）：

buildTreePanel: function(panel) 
{ 
    var tree = Ext.getCmp('leftPanel'); 
    console.log("Building tree panel"); 
    Ext.Ajax.request({ 
     url: 'data/reports.json', //or server call 
     method: 'GET', 
     disableCaching: false, 
     headers: { 
      'Content-Type': 'application/json' 
     }, 
     //params: PARAMETERS 
     success: function(response, options){ 
      var data = Ext.JSON.decode(response.responseText); 
      var treeData = data.details[0]; 
      console.log(treeData); 
      tree.setRootNode(treeData); 
     }, 
     failure: function(response, options){ 
       //do error checking 
     } 
    }); 
}

我希望這有助於一些你！

來源

2017-02-07 23:14:48 aaron

ExtJS5加載JSON到TreePanel中

回答

相關問題