Ext TreePanel的使用

最新推荐文章于 2019-08-28 21:46:13 发布

fly_to_sky

最新推荐文章于 2019-08-28 21:46:13 发布

阅读量1.3w

点赞数 1

分类专栏： Ext 编程文章标签： ext tree function stylesheet xhtml html

本文链接：https://blog.youkuaiyun.com/fly_to_sky/article/details/4046611

版权

Ext 编程专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用Ext JS的TreePanel组件来创建静态和动态的树形菜单。通过示例代码展示了如何创建节点，添加子节点，以及为节点添加点击事件来打开网页链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

<head>

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();

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/");

}

}));

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);

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"

});

tree2.setRootNode(root);

tree2.render();

});

</script>

</head>

</body>

</html>

显示如下：