Ok, I've created an example, but I'm using an extension to load the treeView, but it's not the point.
The complete code is the following:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Product View</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="panels.js"></script>
<!-- Common Styles for the examples http://extjs.com/forum/showthread.php?t=26428 -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<link rel="shortcut icon" href="~/Images/favicon.ico" />
</head>
<body>
<div id="tree-ct"></div>
</body>
<script type="text/javascript">
Ext.tree.MyTreeLoader = function(config){
Ext.apply(this, config);
Ext.tree.MyTreeLoader.superclass.constructor.call(this, config);
};
Ext.tree.MyTreeLoader = Ext.extend(Ext.tree.MyTreeLoader, Ext.tree.TreeLoader, {
treeNodeProvider: null,
loading: false,
load : function(node, callback){
if(this.clearOnLoad){
while(node.firstChild){
node.removeChild(node.firstChild);
}
}
if(this.doPreload(node)){ // preloaded json children
if(typeof callback == "function"){
callback();
}
}else if(this.treeNodeProvider){
this.requestData(node, callback);
}
},
requestData : function(node, callback){
if(this.fireEvent("beforeload", this, node, callback) !== false){
this.loading = true;
var nodesToAdd = this.treeNodeProvider.getNodes();
if(nodesToAdd)
this.processResponse(nodesToAdd, node, callback);
this.loading = false;
} else {
// if the load is cancelled, make sure we notify
// the node that we are done
if(typeof callback == "function"){
callback();
}
}
},
isLoading : function(){
return this.loading;
},
abort : function(){
},
processResponse : function(o, node, callback){
try {
node.beginUpdate();
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.fireEvent("loadexception", this, node, e);
if(typeof callback == "function"){
callback(this, node);
}
}
},
updateTreeNodeProvider: function(obj){
if(this.treeNodeProvider)
this.treeNodeProvider.setData(obj);
}
});
var flag = true;//To toggle the refresh
Ext.onReady(function(){
//Data to load in the tree
var treeData1 = [
{
name: "Folder1",
files:['File1', 'File2', 'File3']
},{
name: "Folder2",
files:['Picture1', 'Picture2']
}
];
//Data to load in the tree
var treeData2 = [
{
name: "Pictures",
files:['Doc1.txt', 'Doc2.txt']
},{
name: "Documents",
files:['xxx.txt', 'yyy.txt']
}
];
//Create your treeNodeProvider; it is an object that must honored an "interface" with these 2 methods:
//setData(value) used internally by the instance of MyTreeLoader "class"
//getNodes(), returning the right structure that the treePanel can elaborate to refresh itself
var saveAction = new Ext.Action({
text: "Save",
handler: function(){
alert("Saving node of id->" + saveAction.selectedNode.attributes.id);
}
});
var userNodeInterceptor = {
click: function(node, eventObject){
var nodeId = node.attributes.id;
alert("Click on node of id->" + nodeId);
},
contextmenu : function(node, e){
if(!this.menu){ // create context menu on first right click
this.menu = new Ext.menu.Menu({
id:'feeds-ctx',
items: [saveAction]
});
this.menu.on('hide', onContextHide, this);
}
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
//if(node.isLeaf()){
this.ctxNode = node;
this.ctxNode.ui.addClass('x-node-ctx');
this.ctxNode.select();//Select the node
saveAction.selectedNode = node;
this.menu.showAt(e.getXY());
//}
}
};
//userNodeInterceptor.click = userNodeInterceptor.click.createDelegate(this);
//userNodeInterceptor.contextmenu = userNodeInterceptor.contextmenu.createDelegate(this);
var onContextHide = function(scope){
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
}
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 = {
id: folder.name,
text: folder.name,
leaf: false,
children: [],
listeners: userNodeInterceptor
}
//Create the children node
for(var j = 0; j < filesInFolder.length; j++) {
var fileName = filesInFolder[j];
var childNode = {
id: fileName,
text: fileName,
leaf: true,
listeners: userNodeInterceptor
}
//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
};
var myTreeLoader = new Ext.tree.MyTreeLoader({
treeNodeProvider: treeNodeProvider
});
//myTreeLoader.updateTreeNodeProvider(treeData1);//if you want to "preload" the TreePanel with this data
var basePanelCfg = {
title: 'TreePanel',
preloadChildren: true,
lines: false,
clearOnLoad: true,
rootVisible: false,
containerScroll: true,
frame: false,
collapsible: false,
animate: true,
loader: myTreeLoader,
tbar:[{
text: "Click here to Refresh",
handler: function(){
var rootNode = treePanel.getRootNode();//get the rootnode
var loader = treePanel.getLoader();//Get the loader, note that is of type MyTreeLoader
//Simulate an ajax call to the server to download your data that you need to visualize in the tree
if(flag)
loader.updateTreeNodeProvider(treeData2);//update the treeNodeProvider associated to the loader
else
loader.updateTreeNodeProvider(treeData1);//update the treeNodeProvider associated to the loader
//Actually refresh the tree UI
loader.load(rootNode);
flag = !flag
}
}]
};
var treePanel = new Ext.tree.TreePanel(basePanelCfg);
var root = new Ext.tree.AsyncTreeNode({
text: 'Root',
draggable: false
});
treePanel.setRootNode(root);
treePanel.render('tree-ct');
});
</script>
</html>
The part you are interested is: (you can do the same without the MyTreeLoader extension, but I had already the code to show the tree, you need to click the refresh button to populate the tree in the example above):
1)Create a litener for your nodes to show the context menu:
var userNodeInterceptor = {
click: function(node, eventObject){
var nodeId = node.attributes.id;
alert("Click on node of id->" + nodeId);
},
contextmenu : function(node, e){
if(!this.menu){ // create context menu on first right click
this.menu = new Ext.menu.Menu({
id:'feeds-ctx',
items: [saveAction]
});
this.menu.on('hide', onContextHide, this);
}
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
//if(node.isLeaf()){
this.ctxNode = node;
this.ctxNode.ui.addClass('x-node-ctx');
this.ctxNode.select();//Select the node
saveAction.selectedNode = node;
this.menu.showAt(e.getXY());
//}
}
};
//userNodeInterceptor.click = userNodeInterceptor.click.createDelegate(this);
//userNodeInterceptor.contextmenu = userNodeInterceptor.contextmenu.createDelegate(this);
var onContextHide = function(scope){
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
}
2)Attach the listener to your node (note that you can have different listeners for different node of course)
var node = {
id: folder.name,
text: folder.name,
leaf: false,
children: [],
listeners: userNodeInterceptor
}
listeners: userNodeInterceptor is the property you can use for your node
I hope this help