Friday, January 04, 2008

ExtJs UI Pattern: User Selection Dialog


User Selection Dialog
A flexible dialog for selecting user in groups.

It is a common requirement to select user from a list of users grouped by hierarchy or role, for example select a user from a department. The User Selection Dialog displays the group and users within the group in a tree structure. To select a user, click on the tree node. The selected node contains the user ID or primary key which will be then be processed by a function handler.

How It Works
The User Selection Dialog is only responsible for displaying the user and group structure in a tree form, and will make available the user ID or primary key of the selected tree node.

It is user responsible to code the handler to process the user ID or primary key. This will make the dialog highly reusable.


Example Implementation and Usage

    var dialog = new UserSelectionDialog();
    dialog.onFinished = function(
userId) {
     
   //perform operation on the userId
        dialog.close();
    }


The dialog use is very simple here as we are only interested to get the selected node ID. The ID can represent the unique username or the primary key used in database.

Below is the implementation of the dialog using ExtJS 2.0 with the new and improve way of extending ExtJs classes.


Ext.namespace('Myapp');

UserSelectionDialog = Ext.extend(Ext.Window, {

    title: '
User Selection',
    width: 280,
    height: 300,
    shadowOffset:6,
    layout: 'fit',
    iconCls: 'teamIcon',
    buttonAlign: 'center',

    initComponent: function() {
        UserSelectionDialog.superclass.initComponent.call(this);

      
  /**
         * Config for Tree and tree store
         */

        var Tree = Ext.tree;
        var root = new Tree.AsyncTreeNode({
            text: 'Departments',
            draggable:false,
            expanded:true,

            id:'source'
        });

        this.treePanel = new Tree.TreePanel({
            autoScroll:true,
            animate:true,
            lines:true,
            containerScroll:true,
            loader: new Tree.TreeLoader({
            dataUrl: Util.ctxpath )+ '/user/treelist'
        }),
            selModel:new Tree.MultiSelectionModel(),
            root:root
        });
        this.add(this.treePanel);

        /**
         * Config for buttons -- Close & Save
         */

        var closeButton = new Ext.Button({
            text:'Close',
            scope:this,
            minWidth:75,
            handler:this.onClose
        });
        this.addButton(closeButton);
        var okayButton = new Ext.Button({
            text:'OK',
            scope:this,
            minWidth:75,
            handler:this.onOkay
        });
        this.addButton(okayButton);

    },

    onClose: function() {
        this.close();
    },

    onOkay: function() {
        var nodes =            this.treePanel.getSelectionModel().getSelectedNodes();
        var idlist = [];
        for (n = 0; n <>            idlist[n] = nodes[n].id }
 
        this.onFinish(idlist)
    },
    
    /**
     * This is the method to be handle by programmer
     * to process the id returned by the tree selection.
     * Note that multiple selection is possible hence
     * the expected array from the tree.
     */

    onFinish: function(idList) {
        
//XXX: Expect idList to be an array
        this.onClose;
    }
});

5 comments:

kenmin said...

can it handles big list (e.g. like more than 100 items?)

Seymour Cakes said...

Yes you can. It's loading JSON by design and lazy load the childs of the selected node.

Joe said...

I'm having a problem getting the JSON string down to the TreeLoader.
Can you paste the code for the server side as well as what the JSON string should look like?

Anonymous said...

Hi I am an ext beginner and am interested in your code but there is an error in the onOkay function. I also would be insterested in how the server response must be to load the tree.

Anonymous said...

somehow I used the line
dataUrl: './03-03.txt'
in UserSelectionDialog def for treenode data,
but seems not working, although in firefox I can see the response is:

[
{text:'not leaf'},
{text:'is leaf',leaf:true}
]

which is exactly what 03003.txt contains, any idea?