Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About
You are here: Home / Tutorials / ExtJS Tutorials / ExtJS Layouts: Messenger Window, Part 1

ExtJS Layouts: Messenger Window, Part 1

July 18, 2009 Leave a Comment

Today I start a series of posts dedicated to ExtJS layouts.  I will initiate this series creating a messenger-like interface that will have an area for displaying contacts and their statuses, and an area for displaying a conversation.  The goal is not to implement a messenger system, but rather to walk through the steps required for building a user interface, and end up with some code that you can use as a learning tool.

In this post I will focus on the contacts area of my messenger-like interface. I will use a window as the container.  Inside this window I will place a number of controls that will satisfy these requirements:

  • Display the name, avatar and status of the current user
  • Provide the user with a means to change her current status, selecting from available, busy, away or appear offline
  • Provide the user with a means to share a quick message and show the music she’s listening to
  • Provide the user with a means to navigate to her profile, contact card, or space
  • Display a the user’s contacts, organized by favorites, available and offline

In future posts I will enhance and refine this interface.  By the end of this post, I will have a window that looks like this:

Looks familiar? 🙂

All right. Let’s get started.

The messenger window

I already decided that my container will be a window.  All I need for the moment is a title and the dimensions:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger'
});

And this is how it looks like:

Display the name, avatar and status of the current user

I will use the window’s toolbar to display the name and avatar of the user.  First, I will create the toolbar and use the new button group component to layout the toolbar items in two columns, one for the avatar and one for the user’s name:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2
    }]
});

The avatar and user name go in as toolbar buttons.  I’m making them buttons because I want to allow the user to click on them and perform some tasks. This is the window now:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
            { xtype: 'splitbutton', text: 'Jorge (available)' }]
        }]
});

It’s starting to look good:

Provide the user with a means to change her current status

To allow for status changes, I will add a menu to the username button.  Here’s the code:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
            { xtype: 'splitbutton', text: 'Jorge (available)',
                menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
                        { text: 'Busy', iconCls: 'ico-sts-busy' },
                        { text: 'Away', iconCls: 'ico-sts-away' },
                        { text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
        }]
    }]
});

And this is how it looks:

Provide the user with a means to share a quick message and show the music she’s listening to

For this, I will use a split button, placed immediately below the username button:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
            { xtype: 'splitbutton', text: 'Jorge (available)',
                menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
                        { text: 'Busy', iconCls: 'ico-sts-busy' },
                        { text: 'Away', iconCls: 'ico-sts-away' },
                        { text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
            },{ xtype: 'splitbutton', text: 'Share a quick message',
                menu: [{ text: 'Show what I am listening to'}]
         }]
    }]
});

Provide the user with a means to navigate to her profile, contact card, or space

I will add this feature in the form of a menu attached to the avatar button:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2,
        menu: [{ text: 'Show profile' }, { text: 'View contact card' },
               { text: 'Go to your space'}]
            },{ xtype: 'splitbutton', text: 'Jorge (available)',
                menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
                        { text: 'Busy', iconCls: 'ico-sts-busy' },
                        { text: 'Away', iconCls: 'ico-sts-away' },
                        { text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
            },{ xtype: 'splitbutton', text: 'Share a quick message',
                menu: [{ text: 'Show what I am listening to'}]
         }]
    }]
});

This is how the menu looks:

Display a the user’s contacts, organized by favorites, available and offline

The contacts will be shown with a treview.  I will create an invisible root node and three branch nodes named Favorites, Available and Offline.  The user’s contacts will be leaf nodes under these branches.

First, I add the tree to the window:

items: [{ xtype: 'treepanel',
    id: 'contacts-tree',
    border: false,
    useArrows: true,
    autoScroll: true,
    animate: true,
    containerScroll: true,
    bodyCssClass: 'tree-body',
    dataUrl: 'messenger.aspx',
    requestMethod: 'get',
    rootVisible: false,
    root: {
        nodeType: 'async',
        text: 'My Reporting Project',
        draggable: false,
        id: 'root-node'
}}]

Then, below the window definition, I add the favorites, available and offline branch nodes, as well as a few dummy contacts.  I use the afterrender event to acquire a reference to the root node and then add child nodes to it:

var tree = Ext.getCmp('contacts-tree');
tree.on('afterrender', function(loader, node) {
    var root = tree.getRootNode();
    var node = root.appendChild({ id: 'favorites', text: 'Favorites', expanded: true, iconCls: 'ico-fav' });
    node.appendChild({ text: 'Susie', leaf: true, iconCls: 'ico-sts-available' });
    node.appendChild({ text: 'Lara', leaf: true, iconCls: 'ico-sts-away' });

    node = root.appendChild({ text: 'Available', expanded: true, iconCls: 'ico-grp-available' });
    node.appendChild({ text: 'Jonh', leaf: true, iconCls: 'ico-sts-busy' });
    node.appendChild({ text: 'Lara', leaf: true, iconCls: 'ico-sts-away' });
    node.appendChild({ text: 'Susie', leaf: true, iconCls: 'ico-sts-available' });

    node = root.appendChild({ text: 'Offline', expanded: true, iconCls: 'ico-grp-offline' });

})

And the window looks just the way I had planned:

This does it for now.  In the next post of this series I will continue adding features to this contacts window.

Downloads

Download the full sample: ExtJs_Messenger_Layout_1.zip

Tagged With: ExtJS Tutorial Leave a Comment

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Free Mobile User Interface Recipes Kit

Free Mobile User Interface Recipes Kit

Sign up to receive my posts via email and get a FREE Mobile User Interface Recipes Kit with mockups packages for three real-world mobile apps. You will save hours of design time when you use the kit to build your own apps.



I will never share your email address.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2018 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in