无法在 extjs 4 的 Treepanel 中显示 json 数据
Posted
技术标签:
【中文标题】无法在 extjs 4 的 Treepanel 中显示 json 数据【英文标题】:Can't show the json Data in Treepanel in extjs 4 【发布时间】:2012-11-28 15:30:55 【问题描述】:我正在努力在 EXTJS 4 TreePanel 中显示 JSON 数据。但我的树没有显示任何数据。请让我知道我错在哪里。让我在下面发布我的代码:
查看部分:它有树形面板
xtype: 'treepanel',
title: 'Standard Geographies',
height: 250,
width: 310,
store: 'Data',
border: 1,
displayField: 'name',
useArrows: true,
rootVisible: true,
multiSelect: true,
preventHeader: true,
renderTo: Ext.getBody(),
columns: [
xtype: 'treecolumn',
text: 'Standard Geographies',
flex: 1,
sortable: false,
//renderer : change,
dataIndex: 'name'
],
模型部分:使用 json 数据
Ext.define('TA.model.TAModel',
extend: 'Ext.data.Model',
fields: ['name','typeId'],
//fields: ['abbr','type'],['name','typeId']
proxy:
type: 'ajax',
url : 'data/StandardGeoTree.json',
actionMethods:
read: 'POST'
,
reader:
type: 'json',
root: 'geographyOptions'
,
);
商店部分:我希望商店部分一切都好
Ext.define('TA.store.Data',
//extend: 'Ext.data.Store',
//model: 'TA.model.TAModel',
extend: 'Ext.data.TreeStore',
model: 'TA.model.TAModel',
autoSync: true,
autoLoad: true,
listeners:
load:function()
console.log('Schemes Data store loaded');
,
proxy:
type: 'ajax',
//url : 'data/StandardGeoTree.json',
api:
//read: 'data/StandardGeo.json',
read: 'data/StandardGeoTree.json',
//update: 'data/updateTradeArea.json'
,
reader:
type: 'json',
root: 'root',
successProperty: 'success',
idProperty : 'typeId'
,
root :
text: 'Root',
id: 'typeId',
expanded : true,
loaded : true,
children: []
);
JSON
"success": true,
"root" : [
"name": "001-USA",
"typeId" : "1",
"children":[
"name": "USA", "typeId" : "1", "leaf":"true",
"name": "State", "typeId" : "2", "leaf":"true",
"name": "DMA", "typeId" : "3", "leaf":"true",
"name": "CSA", "typeId" : "4", "leaf":"true",
]
]
【问题讨论】:
为什么要在模型和商店中都定义代理?因为在您提供的代码中,只会使用商店代理。 这实际上是我从某个地方得到的解决方案。反正我已经把它删了。 【参考方案1】:tree组件的store配置其实没必要这么复杂。例如下面的简单商店声明就足够了:
var treestore = Ext.create('Ext.data.TreeStore',
proxy:
type: 'ajax',
url: 'data/StandardGeoTree.json'
);
然后在你的树配置集store: treestore
和rootVisible: false
最后,商店期望 json 以这种格式响应:
[
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [
"text": "Go jogging",
"leaf": true
,
"text": "Take a nap",
"leaf": true
,
"text": "Climb Everest",
"leaf": true
]
]
【讨论】:
【参考方案2】:在您的 JSON 中,您的根属性必须与您的孩子相似。所以它要么是“根”,要么是“孩子”,但不是两者兼而有之。有关完整说明,请参阅this question。
所以只要你坚持:
reader:
type: 'json',
root: 'root',
successProperty: 'success',
idProperty : 'typeId'
您的 JSON 应该如下所示:
"success": true,
"root" : [
"name": "001-USA",
"typeId" : "1",
"root":[
"name": "USA", "typeId" : "1", "leaf":"true",
"name": "State", "typeId" : "2", "leaf":"true",
"name": "DMA", "typeId" : "3", "leaf":"true",
"name": "CSA", "typeId" : "4", "leaf":"true",
]
]
【讨论】:
感谢@Izhaki 的回答,但它仍然没有显示任何数据。 加载时是否获得控制台日志?另外,您能否评论模型上的代理 - 以便我们可以放大问题。 加载时没有得到任何控制台日志。我已经从模型中删除了代理。在侦听器中,我添加了: afterrender: function(n) console.log('afterrender');控制台.log(n); ,这给了我以下日志:afterrender Object xtype="treepanel", title="Standard Geographies", height=250, more... 好的,当您定义树时,您确定Data
存储在范围内吗?是否取决于您是否通过控制器将两者绑定为应用程序的一部分。您是否也可以尝试手动加载商店,看看您是否在加载时获得日志?【参考方案3】:
没有任何解决办法。所以我不得不在我的视图中编写下面的代码部分来解决我的问题。我正在粘贴下面的代码部分:
var treeStore = Ext.StoreManager.lookup('Data');
treeStore.load();
但我希望我的商店自动加载。如果您有任何自动加载商店的解决方案,请告诉我。
【讨论】:
我仍然认为我对答案的最后评论可能是解决方案。能否请您发布您的控制器代码? 我的控制器工作正常,我已经在我的控制器中绑定了所有的商店和模型。我交叉检查了他们。令人惊讶的是,我所有其他的 json 都被加载了。是不是很奇怪?以上是关于无法在 extjs 4 的 Treepanel 中显示 json 数据的主要内容,如果未能解决你的问题,请参考以下文章
如何在extjs 4.1中的treePanel中移动节点标签的复选框结尾