沉睡森林@漂在北京

本处文章除注明“转载”外均为原创,转载请注明出处。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  152 随笔 :: 4 文章 :: 114 评论 :: 0 Trackbacks
<html>
 
<head>
  
<title> New Document </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>
 
</head>
 
<body>
<script type="text/javascript">
  Ext.onReady(
function(){
      
//定义树的跟节点
      var root=new Ext.tree.TreeNode({
            id:
"root",//根节点id
            text:"我是树根"
      });

      
//定义树节点
      var c1=new Ext.tree.TreeNode({
        id:'c1',
//子结点id
        text:'我是大儿子'
      });

      
var c2=new Ext.tree.TreeNode({
        id:'c2',
        text:'我是小儿子,请点击我',
        icon:'im2.gif',
//自定义节点图标
        href:'http://www.extshow.com/',//添加超链接
        hrefTarget:'_blank'//新窗口打开链接
      });


      
var c22=new Ext.tree.TreeNode({
        id:'c22',
        text:'我是大孙子,请点击我'
      });

      root.appendChild(c1);
//为根节点增加子结点c1
      root.appendChild(c2);//为c1增加子节点c2,相信你已经找到规律了吧^_^
      c1.appendChild(c22);//为c1增加子节点c22

      
//生成树形面板
      var tree=new Ext.tree.TreePanel({
        renderTo:
"show",
        root:root,
//定位到根节点
        animate:true,//开启动画效果
        enableDD:false,//不允许子节点拖动
        border:false,//没有边框
        rootVisible:true//设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
     });

     
//增加点击事件
     c22.on('click',function(node){
          alert('我是:
"'+node.text+'",我的id是:"'+node.id+'"');//这里增加你所需要的点击事件
     });

  })
 
</script>


 
<div id="show"></div>
 
</body>
</html>
posted on 2009-06-11 20:14 王总兵 阅读(1430) 评论(2)  编辑  收藏 所属分类: Ext

评论

# re: ext树菜单的入门例子 2009-06-29 15:30 hhhh
出不来效果啊,搞的什么?  回复  更多评论
  

# re: ext树菜单的入门例子 2009-07-01 09:54 wangbing
@hhhh
你的js都引用了吗?  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: