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

最新推荐文章于 2024-04-27 09:13:51 发布

weixin_34018169

最新推荐文章于 2024-04-27 09:13:51 发布

阅读量133

点赞数

文章标签： java javascript json ViewUI

原文链接：https://my.oschina.net/baishi/blog/110263

版权

为什么80%的码农都做不了架构师？>>>

首先是要展现的效果图：

一：左边的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

转载于:https://my.oschina.net/baishi/blog/110263