Extjs中左边treepanel右边panel动态加载jsp页面
首先是要展现的效果图：
一：左边的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的后台代码就不贴出了。