Ext Tree adding a Context Menu
In the previous Ext Tree and Coldfusion Example post we set up an EXT treeview bound to a Coldfusion component.
In this example we will be building upon that example to add a dynamic context menu to our tree. The context menu will be populated by calling a function in a Coldfusion component.
Step 1
The first thing we need to do is include the below snippet of code in the head section of our page, but after the ext-all.js.<script language="javascript">
Ext.menu.Menu.prototype.load = function( options ){
var dataloader = new Ext.menu.Item({text: 'Loading...'});
var dataconn = new Ext.data.Connection();
this.addItem(dataloader);
dataconn.on('requestcomplete', function( dataconn, response ){
this.remove(dataloader);
response = Ext.decode(response.responseText);
Ext.each( response.menu, function( item ){ this.add( item ) }, this);
}, this);
dataconn.on('requestexception', function(){
this.remove(dataloader);
this.add({text: 'Failed to load menu items'});
}, this);
dataconn.request( options );
}
</script>
The Details
Basically what we are doing here is adding a method to ext Menu class. When a user calls the context menu this method will create a temporary menu item "dataloader" that will show the text "Loading..." We also set up two listeners, one to listen for the "requestcomplete" event and another to listen for the "requestexception" event.
If you look at the requestcomplete even listener you will see that the first thing it does is remove our dataloader menu item. We then decode the JSON data set returned by our function call and then add the menu items.
Step 2
The next thing we need to do is to make a slight modification to the Javascript from the previous post.I have cut the top off of the code here to save space.
....
tree.render();
root.expand();//causes the tree to get its immediate children
tree.render();
//Add the context menu code
tree.on('contextmenu', this.menuShow, this);
},
menuShow : function( node ){
node.select();
var menuC = new Ext.menu.Menu('mainContext');
menuC.load({url:'com/gg/fileExplorer.cfc?method=getTreeContextMenuExt});
menuC.show(node.ui.getAnchor());
}
};
}();
The Details
The first thing we do is add the listener for the contextmenu event. When it is fired we call the function Menushow.
The Menushow function calls the node.select() method to makes sure we can access the selected nodes properties. We then set up our menu with the new load method we added and pass along the URL to call to populate our context menu. We then call the show method to display the menu at the location of the clicked node.
The Backend
For this post I have kept the code for the context menu relatively simple, which means that it's simply returning a static string. Again we are using the Coldfusion 8 returnformat argument to specify that we want to return out string as plain text, this ensures that Coldfusion doesn't do any string escaping or wrap it in a WDDX packet.
<cffunction name="getContextMenu" access="remote" returntype="string" returnformat="plain" output="true">
<cfsavecontent variable="menu">
{menu: [
new Ext.menu.Item({
text: 'Add',
handler:function(e){Ext.Msg.alert('Status', 'You Clicked Add!');}
}),
new Ext.menu.Item({
text: 'Edit',
handler:function(e){Ext.Msg.alert('Status', 'You Clicked Edit!');}
})]
}
</cfsavecontent>
<cfreturn menu>
</cffunction>
As you can see this code doesn't provide any functionality it simply returns a context menu that does nothing but show the menu and display an alert box telling you which item you clicked.
And here is what it looks like:
There are other options we can give out menu, take a look at the API documentation to see what configuration options are available.
Until next time,
Happy Coding...
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
Converting structkeys to lowercase
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
Thanks
You could simply append the id to the url string as in below. Note that its node.attributes.id not node.data.id
menuC.load({url:'com/gg/fileExplorer.cfc?method=getTreeContextMenuExt&id=' + node.attributes.id});
{menu: [new Ext.menu.Item({text: 'Add',handler: openPage,. . ...
where
function openPage(node) {
window.location = 'mypage.cfm?o='+node.attributes.uuid;
}
except the node here is not the treenode I want.
I just found your site, and I'm so loving it !!! Yes! I'm so excited. I need help with add the link to the add on the menu. I want it to link to a page. So I need to replace the alert with (hadler line with ???
{menu: [
new Ext.menu.Item({
text: 'Add',
handler:function(e){Ext.Msg.alert('Status', 'You Clicked Add!');}
}),