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();


    dataconn.on('requestcomplete', function( dataconn, response ){
        response = Ext.decode(response.responseText);
        Ext.each( response.menu, function( item ){ this.add( item ) }, this);
    }, this);

    dataconn.on('requestexception', function(){
        this.add({text: 'Failed to load menu items'});
    }, this);

    dataconn.request( options );

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.

root.expand();//causes the tree to get its immediate children
//Add the context menu code

tree.on('contextmenu', this.menuShow, this);
menuShow : function( node ){
var menuC = new Ext.menu.Menu('mainContext');

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!');}
            <cfreturn menu>

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...

Related Blog Entries

4 Comments to "Ext Tree adding a Context Menu"- Add Yours
Mark's Gravatar How would you pass an id (node.data.id, I guess) through to the Add link so that it opened a new page (that needed this id)?

# Posted By Mark | 11/3/07 10:21 PM
Gary Gilbert's Gravatar Hi Mark,

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});
# Posted By Gary Gilbert | 11/5/07 8:33 AM
Mark's Gravatar I need something more like
{menu: [new Ext.menu.Item({text: 'Add',handler: openPage,. . ...
function openPage(node) {
window.location = 'mypage.cfm?o='+node.attributes.uuid;

except the node here is not the treenode I want.
# Posted By Mark | 11/6/07 3:08 AM
Keelee's Gravatar Hi Gary,

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!');}
# Posted By Keelee | 10/1/08 3:54 PM

Powered By Railo


Subscribe via RSS
Follow garyrgilbert on Twitter Follow me on Twitter
Or, Receive daily updates via email.


adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript jquery max2007 max2008 misc open source programming railo software technology ui

Recent Entries

No recent entries.


An Architect's View
Rey Bango

Wish List

My Amazon.com Wish List