原文
我完成的效果是：
这里点击左边的树是联动右边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的方法。
posted on 2013-04-25 09:42 阅读( ...) 评论( ...)