這個擴充是對Ext.tree.TreeLoader 的功能的增強，可以讓TreePanel 通過不同ajax方式調用的資料對象。
預覽：
Extension goal:
The main goal of the extension is to extend the Ext.tree.TreeLoader so that you can update a TreePanel by manipulating normal "data object" that you can have loaded by an ajax call or in a different way. So you do not have to create an ad-hoc data to populate a TreePanel; it also help to understand better the public interface that a TreeLoader need to implement to be intagrated in the framework. (Attachment with code and examples at the bottom.)
<b>Development history:</b>
<b>************** (24 April 2008)</b>
* Version 0.2.3 *
**************
===== Changed =====
Ext.Tree.MyTreeLoader
-Internal refactoring
****************
<b>**************</b>
* Version 0.2.2 *
===== Added =====
Ext.tree.TreeNodeProvider class
-Added new class Ext.tree.TreeNodeProvider as a better alternative to the prevoius treeNodeProvider object
===== Fixed =====
-Fixed load event, now it is correctly fired (if loadexception is not fired and beforeload does not return false of course, following the standard TreeLoader behaviour), thanks to tford for pointing out the bug
* Version 0.2.1 *
<b></b>
* Version 0.2 *
************
-Added getTreeNodeProvider: function()-> get the treeNodeProvider
-Added setTreeNodeProvider: function(newTreeNodeProvider)-> set a new treeNodeProvider
<b>************</b>
* Version 0.1 *
-Initial release
Tutorial end previous explanations
Version 0.2.2 (examples are based on version 0.2.1)
----------------------------------------------------------------------------------
FIX: load event is correctly fired (if loadexception is not fired and beforeload does not return false of course, following the standard TreeLoader behaviour), thanks to tford for pointing out the bug
ADDED: new class Ext.tree.TreeNodeProvider as a better alternative to the prevoius treeNodeProvider object.
You need to pass to the constructor the following configuration object:
Example of use:
<code></code>
Version 0.2.1
Version 0.2
Added getTreeNodeProvider: function()-> get the treeNodeProvider
Added setTreeNodeProvider: function(newTreeNodeProvider)-> set a new treeNodeProvider
Version 0.1
-------------
The main goal of the extension is to extend the Ext.tree.TreeLoader so that you can update a TreePanel by manipulating normal "data object" that you can have loaded by an ajax call or in a different way (for example if you want to create a menu with the TreePanel, you can "hardcode" the data in your javascript and display them in the TreePanel without any server side call)
So for example, you can update a treeView manipulating an object like this one:
The core part you are interested in is actually the following part
//Create your treeNodeProvider; it is an object that must implement these 2 methods (must "honour" this interface methods) :
// setData(value)
//getNodes(), returning the right structure that the treePanel can elaborate to refresh itself
var treeNodeProvider =
{
data: [],//Property in which are set the data to elaborate
getNodes: function()
{ //Here you process your data
var nodeArray = [];//The tree structure used to refresh the TreePanel
for(var i = 0; i < this.data.length; i++)
var folder = this.data[i];
var filesInFolder = folder.files;
//Create the parent node
var node =
text: folder.name,
leaf: false,
children: []
}
//Create the children node
for(var j = 0; j < filesInFolder.length; j++)
var fileName = filesInFolder[j];
var childNode =
text: fileName,
leaf: true
}
//Set the children to the parent node
node.children.push(childNode);
//Add the parent node to the nodeArray
nodeArray.push(node);
}
//return the tree structure here
return nodeArray;
},
setData: function(data)
{//Called internally by Ext.tree.MyTreeLoader by the method updateTreeNodeProvider
this.data = data;
scope: this//Could be useful to use when you elaborates data to switch the context
not used in this example and it's not required
};
Every time you click to the refresh button in the example, I simulate to load different data, in our case the data we want to elaborate is a structure like the following:
In this case, at the beginning the tree is empty, but you can preload the data in the treeLoader if you remove the comment of this line in the example.
The rendering part is the same of a normal TreePanel, but the way you load the data is different and the work to refresh the tree is this:
In this way you can load the data in the way you prefer and elaborate the data in getNodes function of the treeNodeProvider;
the data can be in the format you like but in getNodes method you need to return a structure that the treePanel can udertend to render itself.
Please feel free to contact me if something is not clear and give me suggestions and feedback so I can improve the code and the example.
I have found it very usefull in my application because you can load the data in the way you want (ajax call or in other way) and then elaborate the data in getNodes.
NEW EXAMPLE 2:
Now, I have updated the extension with these two methods:
Now, I have created an example in which I'm simulating some ajax calls and I'm actually using two different treeNodeProvider to reload my treePanel in different way (I really like it).
So here we are, first treeNodeProvider:
The second treeNodeProvider
Simulating a first AjaxCall in which I'm using the first treeNodeProvider to refresh the tree with nodes:
The second Ajax call, you probably are interested on this one, because I'm simulating to receive a Json string from the server (in the callback of the ajax call):
The response form the server is the following indeed:
var serverResponseString = '[{"text":"Ray Abad","id":"contacts\/11","cls":"file","leaf":"true","listeners": { "click": function(node, eventObject){ alert(node);}} },{"text":"Kibbles Bits","id":"contacts\/9","cls":"file","leaf":"true","listeners":"userNodeInterceptor"},{"text":"Johnny Bravo","id":"contacts\/18","cls":"file","leaf":"true","listeners":"userNodeInterceptor"},{"text":"Mike Bridge","id":"contacts\/13","cls":"file","leaf":"true","listeners":"userNodeInterceptor"},{"text":"Jane Brown","id":"contacts\/2","cls":"file","leaf":"true","listeners":"userNodeInterceptor"},{"text":"Jim Brown","id":"contacts\/19","cls":"file","leaf":"true","listeners":"userNodeInterceptor"}]';
The ajax call is:
var ajaxCallGetDataForTree2 = function(inputParameters)
treePanel.body.mask("Loading data
");
setTimeout(ajaxCallbackGetDataForTree2, 5000);
}
var ajaxCallbackGetDataForTree2 = function()
treePanel.body.unmask();
treePanel.body.highlight('#c3daf9',
{block:true});
//Simulating that I have received the response that is treeData2 from the callback of the ajaxCall
var rootNode = treePanel.getRootNode();//get the rootnode
var loader = treePanel.getLoader();//Get the loader, note that is of type MyTreeLoader
loader.updateTreeNodeProvider(serverResponseString);
loader.load(rootNode);
}
Now, please take a look at the ttbar items, I'm using the following code:
tbar:[
text: "Click here to Refresh using treeNodeProvider",
handler: function()
//Simulating change the treeNodeProvider of the loader
var rootNode = treePanel.getRootNode();//get the rootnode
var loader = treePanel.getLoader();//Get the loader, note that is of type MyTreeLoader
loader.setTreeNodeProvider(treeNodeProvider);
//Simulating an ajax call
ajaxCallGetDataForTree();
}
text: "Click here to Refresh using treeNodeProvider2",
//Simulating change the treeNodeProvider2 of the loader
loader.setTreeNodeProvider(treeNodeProvider2);
//Simulating a different ajax call
ajaxCallGetDataForTree2();
}]
In the handler, before I simulate the ajax call, I set a different treeNodeProvider in the loader:
Of course, you can do that in the ajaxcall or in the ajaxCallback that could be better I think, but mine is only an example
If you want to preolad your tree, you need to use this line of code before creating the treeLoader (as you can see in the example):
Thanks and keep up the good work with Ext!!!
下載下傳源碼