文档章节

Extjs中左边treepanel右边panel动态加载jsp页面

EDIAGD
 EDIAGD
发布于 2013/02/25 21:29
字数 857
阅读 10370
收藏 1

首先是要展现的效果图:

一:左边的treePanel

 

var orgPanel,appContextmenu,orgTreePanel= new Ext.ux.tree.TreeGrid({
            id:'orgTree',
            enableDD: true,
            region : 'center',
            enableSort:false,
            border:false,
            width:200,
            region:"west",
            margins:'0 4 0 0',
            title:'组织架构设置',
            useArrows: true,
            animate: true,
            columns:[{
                header:'组织',
                dataIndex: 'text',
                sortable:false,
                width: 180
            }],
            dataUrl : 'system/organization/resourceTree.json?type=1',
            root: new Ext.tree.AsyncTreeNode({
                id:'0',
                expanded:true
            }),
            tbar :[{
                iconCls : 'refreshItem',
                text : '刷新',
                handler : function() {
                    orgTreePanel.loader.dataUrl = 'system/organization/resourceTree.json?type=1';
                    orgTreePanel.root.reload();
                    orgTreePanel.root.expand(true);
                }
            }, {
                text : '展开',
                tooltip : '展开',
                iconCls : 'addItem',
                handler : function(){
                    orgTreePanel.root.expand(true);
                }
            }, {
                text : '收起',
                tooltip : '收起',
                iconCls : 'updateItem',
                handler : function(){
                    orgTreePanel.collapseAll()
                }
            }],
            contextMenu: new Ext.menu.Menu({
                items: [{
                    iconCls: 'add',
                    text: '新建组织'
                }, {
                    iconCls: 'edit',
                    text: '编辑组织'
                }, {
                    iconCls: 'delete',
                    text: '删除组织'
                }],
                listeners: {
                    itemclick: function(item){
                        var nodeDataDel = item.parentMenu.contextNode.attributes;
                        var parentNodeData = item.parentMenu.contextNode.parentNode;
                        //var nodeData = orgPanel.getSelectionModel().getSelectedNode();
                        switch (item.iconCls) {
                            case 'add':
                                createOrganizationFun(parentNodeData);
                                break;
                            case 'edit':
                                updateOrganizationFun(nodeDataDel,parentNodeData);
                                break;
                            case 'delete':
                                deleteOrganizationFun(nodeDataDel.id,nodeDataDel.children.length==0?true:false);
                                break;
                        }
                        item.parentMenu.hide();
                    }
                }
            }),
            listeners: {
                afterrender: function(t) {
                    treeMask=new Ext.LoadMask(t.getEl(), {msg:"数据加载中..."})
                    orgTreePanel.root.expand(true);
                    orgPanel = t;
                },
                contextmenu: function(node, e){
                    appContextmenu = false;
                    node.select();
                    var tree = node.getOwnerTree();
                    var c = tree.contextMenu;
                    c.contextNode = node;
                    c.showAt(e.getXY());
                }

            }
        });

 

二:接着要绑定treepanel的点击事件:动态的根据树的节点去加载右边的内容:

 

 //当点击组织机构树,动态加载数据jsp页面内容
        orgTreePanel.on('click', function(node) {
            if(node.id!='root'){
                Ext.getCmp('orgPer').getStore().baseParams={
                    id:node.id
                };
                Ext.getCmp('orgPer').getStore().load();
            }
            var req=node.id
            window.frames['orgSet'].window.sendRequest(req);
        });

这里右边的内容的展现,我用到了,frames传参数去加载jsp页面,这里把节点的参数通过frames的方法传进jsp

 

三:右边的带frame的panel:

 

//组织属性设置
        var organizationSet = new Ext.Panel( {
            header : false,
            tbar : [{
                xtype : 'buttongroup',
                items : [{
                    text : '新建组织',
                    tooltip : '新建组织',
                    iconCls : 'addItem',
                    handler : function(){
                        var nodeData,node = orgTreePanel.getSelectionModel().getSelectedNode();
                        if(node){
                            nodeData=node.parentNode;
                            createOrganizationFun(nodeData,nodeData.id,nodeData.type);
                        }else{
                            Ext.Msg.alert('消息提示', '请左边选择一项!');
                        }
                    }
                }, {
                    text : '添加部门',
                    tooltip : '添加部门',
                    iconCls : 'addItem',
                    handler : function(){
                        var nodeData,node = orgTreePanel.getSelectionModel().getSelectedNode();
                        if(node){
                            nodeData=node.attributes;
                            addDepartmentFun(nodeData,nodeData.id,nodeData.type);
                        }else{
                            Ext.Msg.alert('消息提示', '请左边选择一项!');
                        }
                    }
                }]
            }],
            border:false,
            region:'north',
            height:220,
            monitorResize: true,
            autowidth:true,
            autoheight:true,
            frame:true,
            layoutConfig: {
                animate: true //动画效果启用
            },
            html: '<iframe id="orgSet" name="orgSet" src="organizationDetail.jsp" frameborder="0" width="100%" height="100%"></iframe>'
        });

 

四:organizationDetail.jsp的内容:

<%@page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" language="javascript">
    function sendRequest(req) {
        $('#tabl').load('system/organization/content/'+req+'.htm');
        return;
    }
</script>

<style type="text/css">
    .table-detail {
        margin: auto;
        width: 100%;
    }

    .table-detail th {
        text-align: right;
        padding-right: 6px;
        color: #000;
        height: 32px;
        border: solid 1px #A8CFEB;
        font-weight: bold;
        text-align: right;
        font-size: 12px;
        font-weight: bold;
        padding-right: 5px;
        background-color: #edf6fc;
        padding-right: 5px;
        border: 1px solid #8dc2e3;
    }

    .table-detail td {
        border: 1px solid #A8CFEB;
        font-size: 12px;
        padding-left: 6px;
        text-align: left;
    }
</style>

	<table width="98%" class="table-detail" cellpadding="0" cellspacing="1" id="tabl">
     <c:if test="${not empty organizationSets }">
		<tr>
			<th width="140">组织名称</th>
			<td>${organizationSets.name}</td>
		</tr>
		<tr>
			<th>组织描述</th>
			<td>${organizationSets.desc}</td>
		</tr>
		<tr>
			<th>主要负责人</th>
			<td><%--${chargeUser }--%></td>
		</tr>
		<tr>
			<th>上级组织</th>
			<td>
				<c:if test="${not empty superior}">
					${superior.name}
				</c:if>
			</td>
		</tr>
		<tr>
			<th>建立人</th>
			<td>${organizationSets.creatorName}</td>
		</tr>
		<tr>
			<th>建立日期</th>
			<td><fmt:formatDate value="${organizationSets.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
		</tr>
		<tr>
			<th>修改人</th>
			<td>
                ${organizationSets.creatorName}
			</td>
		</tr>
		<tr>
			<th>修改日期</th>
			<td>
				<fmt:formatDate value="${organizationSets.updatetime}" pattern="yyyy-MM-dd HH:mm:ss"/>
			</td>
		</tr>
     </c:if>
	</table>

其中

 function sendRequest(req) {
        $('#tabl').load('system/organization/content/'+req+'.htm');
        return;
    }
用封装的jquery的ajax请求,引入jquery.js就可以用了,通过id获得你想要的table的dom节点,加载请求

五:好了,这里只是介绍Extjs中动态的treePanel和panel的内容的联动效果,其中每个请求对应的java的后台代码就不贴出了。

后续有很多开发填坑的文章发布,如果对你有帮助,请支持和加关注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0 

© 著作权归作者所有

EDIAGD
粉丝 50
博文 149
码字总数 58327
作品 0
嘉定
后端工程师
私信 提问
有公司需要招人的朋友帮推荐一下啊——时间真是不巧

下面这个是我的个人简历: 1、熟练使用java 2. 熟悉MSSQL,MySQL,了解Oracle 3. 熟练使用js 4. 熟练使用JSP/Servlet,Strurts,spring,hibernate,Ajax,ExtJs,还学了些杂七杂八的技术框架...

暗之幻影
2014/12/17
30
0
如何将ExtJS的文件引入到一个JSP页面中。

大家好,在这里请教各位一个关于ExtJS和JSP的问题。 我已经使用ExtJS技术画好了一个界面,即,现在我有了一个.js文件。 我想做的是:将该.js文件对应的界面显示到一个JSP文件中。 这个过程大...

不理不彩
2014/05/30
1K
2
为应用添加数据库监控(采用 Druid)

1、使用dataSource,填写对应的URL username 和password就可以了! <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close"> </......

jxlgzwh
2014/11/21
2.3K
3
Joindesk v1.2 发布

Joindesk是一个使用Ext JS作为前端页面组件的开源J2EE Web应用框架. Joindesk能够加速使用Ext组件的J2EE Web应用开发。 Joindesk v1.2主要增加了对Ext JS 3.x的支持。 http://www.joindesk....

小编辑
2010/05/17
189
0
我现在的技术大概可以拿多少薪水,我列出了我会的东西

现在的工作。模拟用户行为。或者是模拟链接,,就像一个盒子扔进去东西,扔出来东西,不知道里面算法。最后可以达到传进去我想传的,和得到我想要的。有两个重要功能我完成了第一个。接下来做...

码农与厨子
2013/04/27
5.6K
41

没有更多内容

加载失败,请刷新页面

加载更多

华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
9分钟前
2
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
12分钟前
2
0
C++容器底层数据结构

内置数组: int arr[10][10];memset(arr,0,10*10*sizeof(int)); //初始化int tmp[10][10];memcpy(arr, tmp, 10 * 10 * sizeof(int));//拷贝 void *memcpy(void *destin, void *source,......

SibylY
13分钟前
2
0
Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
41分钟前
6
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
43分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部