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中

回答

相关问题