<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html >
<head>
<title>后台框架演示</title>
<link rel="stylesheet" type="text/css" href="js/ext-all.css"/>
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/json2.js"></script></head><body>
<script type="text/javascript">
var Tree = Ext.tree;
var root = new Tree.AsyncTreeNode({
text: '人事管理系统',
draggable:false,
id:'root',
children:[{//子节点
text:'loading',//显示文字为loading
iconCls: 'loading',//使用图标为loading 在index.html style 中定义
leaf:true//是叶子节点,不再包含子节点
}]
});var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoadervar tree = new Ext.tree.TreePanel({
contentEl:'west',
border:true,
root:root,
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'功能菜单',
collapsible :true,
layoutConfig:{
animate:true
},
rootVisible:true,
autoScroll:true,
loader:treeLoader
});
tree.on('click',treeClick);
//tree.expandAll();
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center2',
title: '首页',
autoScroll:true
}]
});
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true
});
}
tab.setActiveTab(n);
}
}
function newTab(id,text,url) {
var n = tab.getComponent(id);
if (!n) {
var n = tab.add({
'id' : id,
'title' : text,
closable:true,
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>'
});
}
tab.setActiveTab(n);
}function gettree(node){
if(node.firstChild.text=='loading'){
var par = node.id;
//alert('par='+par);
Ext.Ajax.request({
url: 'data.jsp',
params: {node:par},
method: 'GET',
success: function(v){ //成功返回
var myData = JSON.parse(v.responseText); // 得到服务器返回的json串，并用json.js解析过对象数组
for(var i=0;i<myData.length;i++ ){
var cnode=new Ext.tree.AsyncTreeNode({
id:myData[i].id,//id 为服务器返回id 父节点id
text:myData[i].departname,//显示内容为服务器返回id 父节点id
leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
children:[{//添加子节点,如果服务器返回tl<i>.leaf为ture则孩子节点将无法显示
text:'loading',
iconCls: 'loading',
leaf:true
}]
});
cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
node.appendChild(cnode);//将当前节点添加为待展开节点子节点
}
node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
},
failure: function2 // 失败
});
}
} function function2(){
alert("失败");
}
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:35
}),
tree,
tab
]
}); tree.render();
root.on('expand',gettree);//当根节点展开后触发gettree事件
//root.expand();
//loadend();
});</script>
<div id="north">
<p class="api-title">后台管理</p>
</div><div id="west">
</div>
<div id="center2"></div>
<div id="loading-mask" style=""></div>
<div id="loading">
</div>
</body></html>现在界面是用的viewport我想改成 直接吧tree渲染到一个div中 一个界面就是一个div，请高手帮我指点下谢谢了~
公司需要我才学ext 才3天 技术不精 搞不定
var tree = new Ext.tree.TreePanel({
contentEl:'west',
renderTo:'west',//加上......................................................
border:true,
root:root,
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'功能菜单',
collapsible :true,
layoutConfig:{
animate:true
},
rootVisible:true,
autoScroll:true,
loader:treeLoader
});