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

原文 http://www.cnblogs.com/shijiewutonghua/archive/2013/03/29/2989236.html

我完成的效果是：

这里点击左边的树是联动右边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的方法。