Ok so, i have this site that i am putting together in the play framework. It basically connects to an FTP site on the back end, retrieves a list of folders/files and sends that to a basic ExtJS front-end as JSON.
我把这个网站放在play框架中。它基本上连接到后端的一个FTP站点,检索文件夹/文件的列表,并将其发送到基本的ExtJS前端作为JSON。
I have it working so that the Tree Panel gets populated correctly, but it doesn't seem to be doing anything special when i expand a non-leaf node.
我让它工作以便树面板得到正确的填充,但是当我扩展一个非叶节点时,它似乎并没有做什么特别的事情。
Based on what i've read, it should use the data url, and pass a node parameter with the id of the node to that data url to get the data for the child nodes, but in firebug i don't see any requests being sent for that data.
根据我所读的内容,它应该使用数据url,并将具有节点id的节点参数传递给该数据url,以获取子节点的数据,但是在firebug中,我没有看到为该数据发送任何请求。
What do i need to do to allow the ajax calls to fire so that nodes that have children will get them dynamically when the node is expanded?
我需要做什么来允许ajax调用触发,以便具有子节点的节点在扩展节点时动态地获取它们?
Here is the relevant code for reference:
以下是相关的代码供参考:
Ext.onReady(function() {
new Ext.Viewport({
layout: 'border',
defaults: {
height: 100,
width: 250,
collapseMode: 'mini'
},
items : [
{
region: 'center',
margins: '5 5 0 0',
contentEl: 'center-content'
},
{
id: 'file-tree',
region: 'west',
title: 'Files',
split: true,
collapsible: true,
xtype: 'treepanel',
autoScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'http://localhost:9000/application/listFiles',
}),
root: new Ext.tree.AsyncTreeNode({
expand: true,
text: "/",
id: "/"
}),
rootVisibile: true,
listeners: {
click: function(n) {
Ext.Msg.alert('File Tree Click', 'You clicked: ' + n.attributes.id);
}
}
}
]
});
});
The id returned in the JSON is the complete path to sub directory i would like to expand, and the listfiles action will take that parameter and return the appropriate files.
JSON中返回的id是我想要展开的子目录的完整路径,而listfiles操作将接受该参数并返回适当的文件。
As requested, here is a snippet of the JSON output:
按照要求,以下是JSON输出的一个片段:
[
{
id: "/./",
text: "./",
leaf: false,
children: [ ]
},
{
id: "/../",
text: "../",
leaf: false,
children: [ ]
},
{
id: "/.ftpquota",
text: ".ftpquota",
leaf: true,
children: [ ]
},
{
id: "/.htaccess",
text: ".htaccess",
leaf: true,
children: [ ]
},
{
id: "/022610.html",
text: "022610.html",
leaf: true,
children: [ ]
},
{
id: "/Gail/",
text: "Gail/",
leaf: false,
children: [ ]
}
]
That last item is an example of the folder that i am looking to dynamically load the children to.
最后一项是我要动态加载子目录的文件夹示例。
2
It is not populating the non-leaf treenodes because in your JSON, there are no children.
它不填充非叶treenodes,因为在JSON中没有子元素。
What you can do is reload the root node, passing additional parameters (ID's) for the subfolders you would like to get results for.
您可以做的是重载根节点,为希望获得结果的子文件夹传递额外的参数(ID)。
on the click or expand events for the AsyncTreeNode, you will need to reload the root. Feed the reload method the ID subfolder (clickedVal) you'd like to reload the tree with.
在为AsyncTreeNode单击或展开事件时,需要重新加载根。为要重新加载树的ID子文件夹(clickedVal)提供reload方法。
myTreePanel.loader = new Ext.tree.TreeLoader({
dataUrl: 'http://localhost:9000/application/listFiles',
requestMethod: 'POST',
listeners: {
beforeload: function() {
this.baseParams.subFolderID = clickedVal;
}
}
});
myTreePanel.root.reload({baseParams: {subFolderID: clickedVal});
Addtional Notes: You'll probably need to build in some navigation controls to move back up the tree using this method.
附加说明:您可能需要构建一些导航控件,以便使用此方法向树中移动。
1
As mentioned by the previous poster, the returned JSON, as written, would NOT return any children (no apparent hierarchy/referencing is present). To explain what is happening, it may help for me to take you through a simple treepanel example.
正如前面的海报所提到的,返回的JSON如所写,不会返回任何子元素(没有明显的层次结构/引用)。为了解释正在发生的事情,我将带您看一个简单的treepanel示例。
First things first- the ExtJS component, the treepanel itself. At its simplest level, you can set un up thus:
首先是ExtJS组件,treepanel本身。在最简单的层次上,您可以这样设置:
MYtreepanel=new Ext.tree.TreePanel({
dataUrl: 'sourceofnodestructure.php',
root: {
nodeType: 'async',
id:'root-node'
}
}
});
Taking you through this code, what this does is create the treepanel component at the most basic level (you will need to add additional settings concerning layout, format, etc etc- as per the code in your original post so it fits with your setup), and add only the minimum settings required to work.
带你通过这段代码中,这是创建treepanel组件在最基本的层面上(有关布局,您需要添加额外的设置格式,等等——按照你的原创文章中的代码符合您的设置),并添加所需的最小设置工作。
The root node is set to asynchronous (i.e. when you click it, it will load its children dynamically from an external source), and given the id value 'root-node' (or whatever you wish). This id is important. When understanding the operation of async treepanels, you should note that when a node is expanded, by default a POST request is sent to the panels loader/dataurl (in this case 'sourceofnodestructure.php') containing the id of the node clicked, this id is passed in a variable called 'node'. The server side script then needs to read this (i.e. in php using $_REQUEST['node']) and serve up the respective JSON denoting the childeren for the clicked node.
根节点被设置为异步(例如,当您单击它时,它将从外部源动态加载其子节点),并给出id值'root-node'(或您希望的任何内容)。这个id是很重要的。在理解异步treepanels的操作时,您应该注意到,当扩展一个节点时,默认情况下,一个POST请求被发送给面板加载器/dataurl(在本例中是“sourceofnodestruction .php”),其中包含节点单击的id,这个id在一个名为“node”的变量中传递。然后,服务器端脚本需要读取这个(即在php中使用$_REQUEST['node']),并提供相应的JSON,表示单击节点的childeren。
i.e. (again, in PHP):
例如(再一次,在PHP中):
switch($_REQUEST['node']){
case "root-node":
// output JSON for child nodes under the root node
break;
case "child node 1":
// output JSON for child nodes under the first child node under the root
break;
}
etc etc...
The second part of any treepanel is the node structure. In the above example, this is fed by a server side script- sourceofnodestructure.php. PHP is my preferred way of serving up nodes as it lets me apply my own processing rules and assign additional attributes to nodes in a more flexible way. As I am not sure whether you are using php or not ('http://localhost:9000/application/listFiles'), I wont go into detail regarding it - however, you should go through how your script identifies the clicked node and ensure you remember that the id of the clicked node is sent to the script in the POST variable 'node', you need to trap this and output children as appropriate.
任何treepanel的第二部分都是节点结构。在上面的示例中,这是由一个服务器端脚本——sourceofnodestruction .php提供的。PHP是我提供节点的首选方式,因为它允许我应用自己的处理规则,并以更灵活的方式为节点分配其他属性。因为我不确定你是否使用的是php(http://localhost:9000 /应用程序/ listFiles),我不会去了解关于它的细节问题,但是,你应该通过你的脚本标识点击节点,确保你记住点击节点的id是发送到脚本的变量节点,您需要这和输出的孩子适当的陷阱。
Let me know if you would like an example of the PHP one may use to handle this.
如果您想要一个PHP示例来处理这个问题,请告诉我。