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