学习ExtJS框架并完成ExtJS+SSH2+JSON实现树形结构(一)

Posted 周四, 06/21/2012 - 17:38 by admin

自从一群牛人整出ExtJS这个框架之后，WEB世界就变得更加完美，特别是对追求唯美而却没有多少美术细胞的WEB程序员而言，Ext的出现弥补了他们这方面的缺陷，因为从此以后大多数的美工他们可以用程序来实现，插上了Ext的翅膀，摇身一变，突然你会发现他们居然真的一个个美感十足。
---查阅EXTJS资料时候看到的

最近还在做权限框架这个项目，因为页面是想要展示一个树形结构，所以就想用一下EXTJS这个前台框架，主要是想简单了解一下这个框架。
由于刚刚接触，所以还非常嫩，简单用EXTJS实现一个最简单的树形结构显示(这仅仅是第一篇，随着学习的深入，最后会将我的功能实现，也就是说最后树形结构是要用EXTJS+JSON+SSH2实现的)。

1. 导入EXTJS文件到ECLIPSE中。

2. 新建一个JSP页面

3. 引入EXTJS的js文件和css文件

4. 设置一个显示区域

5. 初始化TreePanel并且添加TreeNode节点

<span style="font-size:16px;"><script> 
   Ext.onReady(function(){    
        var tree = new Ext.tree.TreePanel({    
            el:'tree' ,
         //autoHeight :true ,
          
         border:false ,
         draggable:true
    
        
        });    
        //根节点  
        var root = new Ext.tree.TreeNode({text:'页面'});  
     
        //一级菜单 
        var node1 = new Ext.tree.TreeNode({text:'模块1'});    
        var node2 = new Ext.tree.TreeNode({text:'模块2'});    
        var node3 = new Ext.tree.TreeNode({text:'模块3'}); 
       
        //叶子节点  
        var node11 = new Ext.tree.TreeNode({text:'操作一'});    
        var node21 = new Ext.tree.TreeNode({text:'操作二'});    
     
 
     
      node1.appendChild(node11);
      node2.appendChild(node21);
        
        root.appendChild(node1);   
        root.appendChild(node2);  
        root.appendChild(node3);    
       
        tree.setRootNode(root);    
        tree.render();  
        root.expand();    
         
   });    
</script></span>

6. 显示结果