繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用Ext Js生成动态树实例代码
- Javascript
- 滚动条代码生成器
- NiftyCube：轻松实现圆角边框
- 懒就要懒到底：鼠标自动点击（含时间判断）
- 简单form标准化实例：语义结构
- 超清晰的document对象详解
- 用正则获取指定路径文件的名称
- 整理的比较不错的JavaScript的方法和技巧
- 求得div 下 img的src地址的js代码
- js+css实现的仿office2003界面
- 一个不错的应用,用于提交获取文章内容，不推荐用
- 插件：检测javascript的内存泄漏
- 得到文本框选中的文字，动态插入文字的js代码
- 翻译整理的jQuery使用查询手册
- 一个的简易文本编辑器源码
- HTML中不支持静态Expando的元素的问题
- 用CSS打造多彩文字链接
- 一个不错的用JavaScript实现的UBB编码函数
- js实现的非常棒的绿色下拉透明菜单
- 优秀js开源框架-jQuery使用手册(1)
- 学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Javascript 中的 利用Ext Js生成动态树实例代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 419 ::
收藏到网摘: n/a
今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。 一. 需求
要求生成一颗部门树，初始只列出根部门
当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点
部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单
二. 关键类
这里主要涉及Ext JS的两个类:
Ext.tree.TreeNode
Ext.menu.Menu
相关API可以参考：http://extjs.com/deploy/ext/docs/
三. 代码示例
1. 先看一下测试页面
复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../shared/lib.css" />
<script type="text/javascript">
/**************
onload事件
***************/
window.onload=function(){
createTree(3);
}
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<h1>现在要生成一颗动态树</h1>
<div id="container">
</div>
</body>
</html>
2. 再看一下生成树的函数
复制代码 代码如下:
/***********************************
创建树
by chb
************************************/
function createTree(n){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"Extjs动态树",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:"30%",
lines:true
});
//根节点
var root=new Ext.tree.TreeNode({
id:"root",
text:"集团公司",
expanded:true
});
for(var i=0;i<n;i++){
var sub1=new Ext.tree.TreeNode({
id:i+1,
text:"子公司"+(i+1),
singleClickExpand:true,
listeners:{
//监听单击事件
"click":function(node){
myExpand(node);
},
//监听右键
"contextmenu":function(node,e){
//列出右键菜单
menu=new Ext.menu.Menu([
{
text:"打开当前节点",
icon:"list.gif",
handler:function(){
myExpand(node);
}
},
{
text:"编辑当前节点",
icon:"list.gif",
handler:function(){
alert(node.id);
}
},
{
text:"删除当前节点",
icon:"list.gif",
handler:function(){
alert(node.id);
}
}]);
//显示在当前位置
menu.showAt(e.getPoint());
}
}
});
root.appendChild(sub1);
}
mytree.setRootNode(root);//设置根节点
mytree.render();//不要忘记render()下,不然不显示哦
}
3. 展开子节点的代码
复制代码 代码如下:
/******************************************
展开节点
******************************************/
function myExpand(node){
if(node.id=='1'){
if(node.item(0)==undefined){
node.appendChild(new Ext.tree.TreeNode({
id:node.id+'1',
text:node.text+"的第一个儿子",
hrefTarget:"mainFrame",
listeners:{//监听
"click":function(node,e){
expand2(node)
}
}
}));
}
node.expand();
}else if(node.id=='2'){
node.appendChild(new Ext.tree.TreeNode({
id:node.id+'2',
text:node.text+"的第一个儿子",
hrefTarget:"mainFrame",
listeners:{//监听
"click":function(node){
expand2(node)
}
}
}));
}else{
alert(node.id+"没有子部门了");
}
}
读者可以自己运行一下如上代码，会发现如下现象：无论点击“子公司1”多少次，只会列出“子公司1的第一个儿子”一个节点，而每点击一次“子公司2”，就会多出一个“子公司2的第一个儿子”节点，这是为什么呢？
因为每次点击都会激发myExpand函数，而“子公司1”上加了node.item(0)==undefined的判断，这里明白了？
即：如果该部门下没有子部门，则载入子部门，否则只展开，不重新载入。
好了，就到这里吧，困了，就不详细解释了o(∩_∩)o...哈哈
评论 (0) All
