别人博客转的 学习EXTJS框架并完成EXTJS+SSH2+JSON实现树形结构(一)

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

                                                                                                                                                                                                                                                                                                                                                                                                                         ---查阅EXTJS资料时候看到的

 

最近还在做权限框架这个项目，因为页面是想要展示一个树形结构，所以就想用一下EXTJS这个前台框架，主要是想简单了解一下这个框架。

由于刚刚接触，所以还非常嫩，简单用EXTJS实现一个最简单的树形结构显示(这仅仅是第一篇，随着学习的深入，最后会将我的功能实现，也就是说最后树形结构是要用EXTJS+JSON+SSH2实现的)。

 

1.        导入EXTJS文件到ECLIPSE中。

2.        新建一个JSP页面

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

4.        设置一个显示区域

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

[javascript] view plaincopyprint?

1. <span style="font-size:16px;"><script>   
2.    Ext.onReady(function(){      
3.         var tree = new Ext.tree.TreePanel({      
4.             el:'tree' ,  
5.          //autoHeight :true ,  
6.             
7.          border:false ,  
8.          draggable:true  
9.       
10.           
11.         });      
12.         //根节点    
13.         var root = new Ext.tree.TreeNode({text:'页面'});    
14.        
15.         //一级菜单   
16.         var node1 = new Ext.tree.TreeNode({text:'模块1'});      
17.         var node2 = new Ext.tree.TreeNode({text:'模块2'});      
18.         var node3 = new Ext.tree.TreeNode({text:'模块3'});   
19.          
20.         //叶子节点    
21.         var node11 = new Ext.tree.TreeNode({text:'操作一'});      
22.         var node21 = new Ext.tree.TreeNode({text:'操作二'});      
23.        
24.    
25.        
26.       node1.appendChild(node11);  
27.       node2.appendChild(node21);  
28.           
29.         root.appendChild(node1);     
30.         root.appendChild(node2);    
31.         root.appendChild(node3);      
32.          
33.         tree.setRootNode(root);      
34.         tree.render();    
35.         root.expand();      
36.            
37.    });      
38. </script></span>  

6.        显示结果

 

 

         到此为止，最简单的树形结构就完成了，虽然不过华丽，但是这几句简单的代码就是我日后完成我权限显示树形结构的基石。框架出世，WEB世界完美，其实，不然，基石铺垫，一切才完美。