文档章节

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

EDIAGD
 EDIAGD
发布于 2013/02/25 22:21
字数 773
阅读 3762
收藏 9

我完成的效果是:

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

© 著作权归作者所有

EDIAGD
粉丝 49
博文 149
码字总数 58327
作品 0
嘉定
后端工程师
私信 提问
Ext JS 6.0.0 正式版本发布,跨浏览器的 RIA 框架

Ext JS 6.0.0 正式版本发布,此版本包括大量的新特性以及错误修复: 新特性: Accessibility (3) EXTJS-12098 Containers should track their children’s focus EXTJS-13606 Floating mixi...

chpinck
2015/07/06
8.6K
49
JQuery 和 Extjs 比较

JQuery 和 Extjs 比较 一、JQuery 和 Extjs 比较 JQuery-EasyUI是仿照Ext做的。 Ext框架是一个整体,面向对象的编程思想,每个控件之间可以相互通讯。JQuery的控件全都是分散的,没有整体性可...

Amamatthew
2014/09/11
0
0
ExtJS 4.2 发布

ExtJS 4.2 下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.0/2142 ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框...

oschina
2013/03/15
10.6K
31
Ext JS 3.2 Beta 发布

ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的 前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发...

红薯
2010/03/11
780
1
ExtJS 4.0 最终版发布

ExtJS 4.0 正式版终于来了。ExtJS 4.0 不仅在框架本身做了很多改进,也带来了很多新的特性,用来开发下一代的可靠的Web应用。 下载 Ext JS 4.0 查看 Release Notes 查看 Examples ExtJS 主要...

红薯
2011/04/26
25.6K
24

没有更多内容

加载失败,请刷新页面

加载更多

面向对象方面的一些东东

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" cont......

流年那么伤
23分钟前
2
0
git 过滤文件夹和文件(IDEA)

最近使用git版本管理工具遇到一件很烦的事情,commit时总会把.idea、.*.iml和target文件添加进来,实际开发中,这些是需要过滤掉的。在.gitnore文件添加了过滤不起作用。下面介绍一种成功过滤...

uug
31分钟前
2
0
Spark Streaming 实时统计商户当日累计PV流量

一、问题 对实时流量日志过滤筛选商户流量,对每个商户的流量进行累计,统计商户实时累计流量。 当时间超过24时时,重新统计当日商户的实时累计流量。 二、实现步骤 1、采用Spark Streaming...

boonya
35分钟前
2
0
如果Task与Event 创建了记录类型后,不出现在Lightning的Activities中

如果在Lightning的Activities没出现这两个Button,但是在页面布局的Lightning 按钮区也存在,全局操作的记录类型就需要选择一个,否则不会出现

在山的那边
44分钟前
2
0
ddd中的子域和界限上下文

我们先来说说子域是什么?子域在我的理解是在一个庞大的系统中可以明显感知的不同的区块,如果在电商模块中,商品目录,订单,物流,库存,发票等等都可以感知他们明显的不同,可以认为是子域...

算法之名
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部