extjs中OA管理中组织和用户关系左右选择组件的运用
2013-02-25 00:00
302 查看
我完成的效果是:
这里点击左边的树是联动右边itemselector 组件中的用户,并且带有用户搜索
一:废话不多,贴上js代码:
二:这里我们先看表单中, xtype:'itemselector',组件,要用到,需要引入两个js:
和
这样 itemselector组件就可以用了,其中左边加载的数据:可选用户:userSelectStore
右边部分加载的数据:已选用户:userSelectStoreOwn
三:接着我们来看一下整个window弹出窗中,左边treePanel的绑定的事件:
通过 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的代码就不贴了。
后续有很多开发填坑的文章发布,如果对你有帮助,请支持和加关注一下
http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944
https://shop119727980.taobao.com/?spm=0.0.0.0
这里点击左边的树是联动右边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组件就可以用了,其中左边加载的数据:可选用户: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的代码就不贴了。
后续有很多开发填坑的文章发布,如果对你有帮助,请支持和加关注一下
http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944
https://shop119727980.taobao.com/?spm=0.0.0.0
相关文章推荐
- ExtJs中OA管理中组织和用户关系左右选择组件的运用
- ExtJs中OA管理中组织和用户关系左右选择组件的运用
- ExtJs中OA管理中组织和用户关系左右选择组件的运用
- ExtJs学习笔记(1)ItemSelector (用户关系左右选择组件)
- Extjs结合JfreeChart批量生成图片用于用户选择组件时预览(接昨天博文)
- 基于AD的用户组织目录树选择工具的解决方案
- 选择用户组件 Example 程序
- Extjs2. 4000 0.2 datefield 日期组件在点击选择日期时下拉面板在chrome, firefox中样式乱掉的解决办法
- MOSS基于AD的用户组织目录树选择工具的解决方案
- Extjs 5 可选择日期+时间的组件DateTimeField
- Extjs 3.3.1 日历组件,只选择年月
- C#.NET通用管理系统后台管理组件中选择组织机构选择功能增加默认选择内部组织机构的功能
- 选择用户组件 Example 程序
- 基于AD的用户组织目录树选择工具的解决方案
- 基于AD的用户组织目录树选择工具的解决方案
- 选择用户组件 Example 程序
- 设置ExtJS中的日期组件选择大于等于当前系统日期
- .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择
- WORKFLOW-用户-角色-组织-权限间关系
- java开发,前台用EXTJS展示,后台 swfuplaod批量图片上传组件的运用