ExtJs中OA管理中组织和用户关系左右选择组件的运用

我完成的效果是：

这里点击左边的树是联动右边itemselector 组件中的用户，并且带有用户搜索

一：废话不多，贴上js代码:

var addUsersWin,addUsersFun = function (data) {            userSelectStore.load();            userSelectStoreOwn.load();            addUsersWin = new Ext.Window({                title:"添加员工",                width:780,                height:480,                buttonAlign:'center',                modal:true,                items:[                    {                        xtype:'form',                        plain:true,                        url:'system/addOrganizationUser.json',                        labelWidth:80,                        baseCls:"x-plain",                        bodyStyle:"padding:8px",                        labelAlign:'right',                        frame: true,                        items: [{                            layout:'column',                            height:50,                            border :false,                            bodyCssClass  : "queryForm",                            defaults : {                                layout : 'form',                                border :false,                                bodyCssClass: "queryForm",                                defaults : {                                    anchor : '95%',                                    xtype : "textfield"                                }                            },                            items:[                                {                                    columnWidth:0.7,                                    //layout: 'form',                                    items: [{                                        xtype:'textfield',                                        name: "filter['name']",                                        id:'userName',                                        fieldLabel: '用户姓名'                                    }]                                },                                {                                    columnWidth:0.08,                                    //layout: 'form',                                    items: [                                        {                                            xtype:'button',                                            text: '查询',                                            iconCls: 'findItem',                                            handler: function(){                                                var un= Ext.getCmp('userName').getValue();                                                userSelectStore.baseParams={                                                    name:un                                                };                                                userSelectStore.load();                                            }                                        }                                    ]                                }                            ]                        },{                            layout:'column',                            height:300,                            items:[                                {                                    columnWidth:0.3,                                    layout: 'form',                                    items: [{                                        xtype:'treepanel',                                        region: 'west',                                        split: true,                                        width: 200,                                        height: 300,                                        margins:'0 4 0 0',                                        enableDD: true,                                        containerScroll: true,                                        border: false,                                        rootVisible: false,                                        autoScroll:true,                                        root: {                                            nodeType: 'async'                                        },                                        loader: new Ext.tree.TreeLoader({                                            dataUrl: 'system/organization/resourceTree.json?type=1',                                            baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}                                        }),                                        listeners: {                                            checkchange: function(node, checked){                                                node.expand();                                                node.attributes.checked = checked;                                                node.eachChild(function(child) {                                                    child.ui.toggleCheck(checked);                                                    child.attributes.checked = checked;                                                    child.fireEvent('checkchange', child, checked);                                                })                                            },                                            afterRender: function (t) {                                                treeP = t;                                                treeP.root.expand(true);                                            },                                           click:function(node){                                                if(node.id!='root'){                                                    userSelectStore.baseParams={                                                        id:node.id                                                    };                                                    userSelectStore.load();                                                }                                           }                                        }                                    }]                                },                                {                                    columnWidth:0.7,                                    layout: 'form',                                    items: [                                        {                                            xtype:'itemselector',                                            name:'userIds',                                            imagePath:'images/ext/ux/images/',                                            availableTitle:'可选用户',                                            selectedTitle:'已选用户',                                            multiselects:[                                                {                                                    width:200,                                                    height:300,                                                    store:userSelectStore,                                                    displayField:'name',                                                    valueField:'id'                                                },                                                {                                                    width:200,                                                    height:300,                                                    displayField:'name',                                                    valueField:'id',                                                    store:userSelectStoreOwn                                                }                                            ]                                        }                                    ]                                }                            ]                        }                        ]                    }                ],                buttons:[                    {                        text:'确定',                        handler:function () {                            var fromPanel = addUsersWin.get(0);                            if (!fromPanel.getForm().isValid()) {                                Ext.Msg.alert("提示", "请按相关提示正确填写");                                return;                            }                            fromPanel.form.submit({                                params:{id:data.id},                                waitMsg:'正在处理中...',                                failure:function (form, action) {                                    Ext.Msg.alert('错误消息', "修改失败,请联系技术人员!");                                },                                success:function (form, action) {                                        Ext.MessageBox.alert('消息提示', '添加成功!');                                        frameworkGridStore.reload();                                        addUsersWin.destroy();                                }                            });                        }                    },                    {                        text:'取消',                        handler:function () {                            addUsersWin.destroy();                        }                    }                ]            });            addUsersWin.show();        }

二：这里我们先看表单中， xtype:'itemselector',组件，要用到，需要引入两个js：
ItemSelector.js 和 MultiSelect.js

这样 itemselector组件就可以用了，其中左边加载的数据：可选用户：userSelectStore

var userSelectStore = new Ext.data.JsonStore({            url:'system/getAllUserList.json',            idProperty:'id',            fields:[ 'id', 'name' ],            root:'userList',            paramNames : {                id:'',                name:''            }        });

右边部分加载的数据：已选用户：userSelectStoreOwn

var userSelectStoreOwn = new Ext.data.JsonStore({            url:'system/getOrganizationUserList.json',            idProperty:'id',            fields:[ 'id', 'name' ],            root:'userList'        });

三：接着我们来看一下整个window弹出窗中，左边treePanel的绑定的事件：

click:function(node){                                                if(node.id!='root'){                                                    userSelectStore.baseParams={                                                        id:node.id                                                    };                                                    userSelectStore.load();                                                }                                           }

通过 click事件，我们可以根据树节点的 id去加载 itemselector组件左边，可选用户的数据.

四：最后，我们在做搜索的时候：

xtype:'button',                                           text: '查询',                                           iconCls: 'findItem',                                           handler: function(){                                               var un= Ext.getCmp('userName').getValue();                                               userSelectStore.baseParams={                                                   name:un                                               };                                               userSelectStore.load();                                           }

我们是把输入框input中的值作为itemselector左边可选用户的数据加载的参数，去加载可选用户。

五：最后说一下itemselector这个组件，在表单中是通过name:'userIds',把多个的id的字符串传给java后台的，处理时候，只要切割逗号的字符串，就行了。这个组件的js目前只封装好了，传valueField的值过去，

如果想要显示值是displayField，要在源码中自己仿照getValue()方法写获得displayField的方法。

好了，这里主要是介绍extjs代码的处理，后台java的代码就不贴了。

作者: EDIAGD
原文: http://my.oschina.net/baishi/blog/110277