Ext TreePanel的使用
最近一直在学习Ext相关知识，每天都很忙，每天都感觉时间过的很快，虽然每天都有收获每天都有新发现，但是，仔细的想想，其实，也没啥！有点痛苦，有点迷茫，清醒一点点麻木，麻木一点清醒，残酷、孤独、无助，但也有种前所未有的归属、充实与快乐！我真的无法用言语来形容那种“东西” 。好了，下面就开始我们今天的主题吧！今天我要做的是介绍 TreePanel的一些运用。
由静态数据生成静态树形菜单：
例1：简单生气树形菜单
代码：
var root=new Ext.tree.TreeNode({text:"root"}); //声明根节点
var node2=new Ext.tree.TreeNode({text:"根节点2"});//声明一个子节点
var node3=new Ext.tree.TreeNode({text:"根节点3"});//声明一个子节点
var node4=new Ext.tree.TreeNode({text:"根节点4"});//声明一个子节点
var node1=new Ext.tree.TreeNode({text:"根节点1"});//声明一个子节点
node2.appendChild(node3);//节点2添加子节点3
node2.appendChild(node4);
root.appendChild(node2);
root.appendChild(node1);
var tree2=new Ext.tree.TreePanel({
title:"自定义数据", //树形菜单标题
width:300, //树形菜单宽度
height:300, //树形菜单高度
frame:true, //采用渲染
draggable:false, //不允许拖拽
el:"tree" //在 HTML页面中ID为tree的标签中显示
});
tree2.setRootNode(root); //设置TreePanel的根节点为root
tree2.render(); //加载
例2：运用appendChild()方法添加子节点
代码：
var treePanel=new Ext.tree.TreePanel({
applyTo:Ext.get("tree2"),
title:"菜单标题",
frame:true,
width:300,
height:400,
root : new Ext.tree.TreeNode({
id : 'root',
text : '网页查看',
draggable : false, //false默认设置，不能被拖拽
expanded : true //设置菜单展开
})/**/
});
//添加子节点
treePanel.root.appendChild(new Ext.tree.TreeNode({
id : 'htmlPanel',
text : '百度',
listeners : {
'click' : function(node, event) {
event.stopEvent();
window.open("http://www.baidu.com");
}
}
}));
//添加子节点
treePanel.root.appendChild(new Ext.tree.TreeNode({
id:"sinaPage",
text:"新浪",
expanded:true,
listeners:{
"click":function(node,event){
event.stopEvent();
window.open("http://www.sina.com");
}
}
}));
var node=treePanel.getNodeById("sinaPage"); //获取子节点
node.appendChild(new Ext.tree.TreeNode({
id:"page1",
text:"新闻",
listeners:{
"click":function(node,event){
event.stopEvent();
window.open("http://book.sina.com.cn/");
}
}
}));
//添加子节点的子节点
node.appendChild(new Ext.tree.TreeNode({
id:"page2",
text:"影视",
listeners:{
"click":function(node,event){
event.stopEvent();
window.open("http://book.sina.com.cn/");
}
}
}));
//添加子节点的子节点
node.appendChild(new Ext.tree.TreeNode({
id:"page3",
text:"体育",
listeners:{
"click":function(node,event){
event.stopEvent();
window.open("http://book.sina.com.cn/");
}
}
}));
全部代码：treepanel.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tree</title>
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script language="javascript">
Ext.onReady(function(){
var treePanel=new Ext.tree.TreePanel({
applyTo:Ext.get("tree2"),
title:"菜单标题",
frame:true,
width:300,
height:400,
root : new Ext.tree.TreeNode({
id : 'root',
text : '网页查看',
draggable : false, //false默认设置，不能被拖拽
expanded : true //设置菜单展开
})/**/
});
//添加子节点
treePanel.root.appendChild(new Ext.tree.TreeNode({
id : 'htmlPanel',
text : '百度',
listeners : {
'click' : function(node, event) {
event.stopEvent();
window.open("http://www.baidu.com");
}
}
}));
//添加子节点
treePanel.root.appendChild(new Ext.tree.TreeNode({
id:"sinaPage",
text:"新浪",
expanded:true,
listeners:{
"click":function(node,event){
event.stopEvent();
window.open("http://www.sina.com");
}
}
}));
var node=treePanel.getNodeById("sinaPage"); //获取子节点
node.appendChild(new Ext.tree.TreeNode({
id:"page1",
text:"新闻",
listeners:{
"click":function(node,event){
event.stopEvent();