Ext JS Layouts: Messenger Window, Part 2

In this article I will enhance the Ext JS layout I started building in Ext JS Layouts: Messenger Window, Part 1.  The layout is a messenger-like window that shows the status of the user, displays the user’s contacts on a treeview, and provides menus for changing status, sharing quick messages and navigating to the user’s profile editor or contact card.

Be mindful that I’m not aiming for a full-fledged instant messenger implementation.  I’m rather trying to illustrate the different steps involved in the creation of a UI with Ext JS.

My goal for this iteration is to augment the window I built with the following visual features:

• Edit favorites and a Change favorites layout menus that activate with a right-click on the Favorites node of the Contacts treeview
• Send instant message, Send email message and Add to favorites menus that activate with a right-click on any of the displayed contacts

This is how the finished window will look like:

Using the Ext.Action Class to implement menu handlers

To implement the Edit favorites and Change favorites functionality, I will use instances of Ext.Action. I will use the text and handler comfiguration options to specify the menu item’s text and the handler function:

var editFavAction = new Ext.Action({
    text: 'Edit favorites',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Edit favorites...');
    }
});

var changeFavAction = new Ext.Action({
    text: 'Change favorites layout',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Change favorites layout...');
    }
});

var favMenu = new Ext.menu.Menu({
    items: [editFavAction, changeFavAction]
});

The favMenu menu looks like this:

In the same fashion, Action instances will handle the Send instant message, Send email message and Add to favorites features:

var sendImAction = new Ext.Action({
    text: 'Send instant message',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Send instant message...');
    }
});

var sendMailAction = new Ext.Action({
    text: 'Send email message',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Send email message...');
    }
});

var addToFavesAction = new Ext.Action({
    text: 'Add to favorites',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Add to favorites...');
    }
});

var contactMenu = new Ext.menu.Menu({
    items: [sendImAction, sendMailAction, '-', addToFavesAction]
});

This is the finished contactMenu:

Action instances allow for sharing pieces of functionality among different components.  They are not strictly needed in this case, but could be beneficial in the future, if you wanted to, for example, add a global menu to the window, that would perform the same functionality as the context menus:

var globalMenu = new Ext.menu.Menu({
    items: [editFavAction, changeFavAction,'-',
    sendImAction, sendMailAction,'-', addToFavesAction]
});

Creating a context menu for the Ext.tree.TreePanel instance

I can use the tree panel’s contextmenu event to show either the favorite menu or the contact menu.  To decide what menu will be shown, I simply check the selected node’s id:

listeners: {
    contextmenu: function(node, e) {
        node.select();
        var contextMenu;
        if (node.id == 'favorites') {
            contextMenu = favMenu;
        } else if (node.id != 'available' && node.id != 'offline') {
            contextMenu = contactMenu;
        }
	if (contextMenu) {
            contextMenu.contextNode = node;
            contextMenu.showAt(e.getXY());
	}
    }
}

Notice above how both menus remain inactive when the selected node is either the Available or Offline branch.

Next steps

With the menus in place, I now have a pretty decent Contacts window.  Next step: the Chat window. 

Stay tuned!

Downloads

Download the full sample from my downloads page.