ExtJS4:TreePanel存储通过Itemclick一次又一次加载json文件 [英] ExtJS4: TreePanel Store is loading the json File again and again by Itemclick
问题描述
我有一个包含3个主要菜单的json.在第一个菜单点中，有一个子菜单，因此菜单点1没有叶子".当我单击符号文件夹时，整个菜单(整个json文件)再次位于子菜单下.因此，它的无限.有人可以帮我吗?谢谢!!
I have a json which has 3 main-menupoints. In the first menupoint, there is one submenu, so the menupoint 1 is no 'leaf'. When I click at the folder Symbol, the whole menu (the whole json file) is again under the submenu. So its infinity. Can someone help me with this please? THANK YOU!!
这是我的文件:
app/data/tree.json
{
'result':
[
{
"text": "Point1",
'children':[
{
"text": "SubPoint1",
'leaf':true
},
]
},
{ "text": "Point2",
'leaf':true
},
{
"text": "Point3",
'leaf':true
},
]
}
view/TreeMenu.js
Ext.define('App.view.TreeMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treemenu',
title:'Title',
store: 'TreeMenu'
});
store/TreeMenu.js
Ext.define('App.store.TreeMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.TreeMenu',
model: 'App.model.TreeMenu',
proxy: {
type: 'ajax',
url: 'app/data/tree.json',
reader: {
type: 'json',
root: 'result'
}
}
});
model/TreeMenu.js
Ext.define('App.model.TreeMenu', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'int', leaf:false, text:'name'},
{ name: 'value', type: 'string', leaf:false, text:'value'},
]
});
controller/TreeMenu.js
Ext.define('App.controller.TreeMenu', {
extend: 'Ext.app.Controller',
views: ['TreeMenu'],
models: ['TreeMenu'],
stores: ['TreeMenu'],
onLaunch: function() {
var treeStore = this.getTreeMenuStore();
treeStore.load({
//callback: this.onStationsLoad,
scope: this
});
},
refs: [{
selector: 'tree',
ref: 'treemenu'
}],
init: function() {
this.control({
'treemenu': {
itemclick : this.treeItemClick
}
});
},
treeItemClick : function(view, record) {
console.log(record);
}
});
推荐答案
我花了一段时间才意识到，但是您的树实际上是按设计的方式工作的:)
It took me a while to realize but your tree is actually working as designed :)
我创建了一个小提琴以使其可视化: http://jsfiddle.net/dbrin/auBTH/
I created a fiddle for it to visualize: http://jsfiddle.net/dbrin/auBTH/
基本上，每次在tree中展开节点时，默认行为是加载该节点的子级.这意味着store会将GET请求发送到proxy url属性指定的服务器.它发送您单击以展开节点的ID，以便服务器端将使用该ID运行查询.
Essentially every time you expand a node in a tree the default behavior is to load that node's children. That means the store will send a GET request to the server specified by the proxy url property. It sends the id of the node that you clicked on to expand so that the server side would use that id to run the query.
正如您所说的，您总是返回相同的数据集，而这正是您所看到的:每次扩展树节点时，都会将相同的数据集作为扩展节点的子代附加到树上.您返回的节点之一是可扩展的..，因此您可以再次重复该过程:)
As you said you always return the same data set back and that is exactly what you are seeing: every time you expand a tree node an identical data set is appended to the tree as the children of the expanded node. One of the nodes you return is expandable .. and so you can repeat the process again :)
编辑:经进一步思考，我发现了一个单独的问题，该问题使节点在服务器上寻找子节点，而不是在下面的已获取子节点.问题在于阅读器的定义方式.在原始代码中，您将json阅读器设置为解析从服务器返回的数据，并将root属性设置为结果.
尽管这对初始数据加载有效，但也会影响子节点的读取方式.本质上，root配置会覆盖默认的儿童配置.我更正了前面的示例，将root属性更改为 children - http://jsfiddle.net/dbrin/auBTH/4/现在可以正常工作了.
EDIT: upon further thought I found a separate issue that makes the node look for children nodes on the server instead of the already fetched sub nodes underneath. The issue is with how the reader is defined. In your original code you set json reader to parse data returned from the server specifying the root property set to result.
While this works on the initial load of data it also has an impact on how the children nodes are read. Essentially root config overrides the default children config. I corrected my previous example changing the root property to children - http://jsfiddle.net/dbrin/auBTH/4/ now it works as expected.
这篇关于ExtJS4:TreePanel存储通过Itemclick一次又一次加载json文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
