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

最新推荐文章于 2019-09-05 19:02:51 发布

IT静心修行

最新推荐文章于 2019-09-05 19:02:51 发布

阅读量583

点赞数

文章标签： extjs 框架 json ssh eclipse web

此文章由kotlinvip拥有、微信号kotlinvip

本文链接：https://blog.csdn.net/vipyhd/article/details/7734771

版权

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

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

1. 导入EXTJS文件到ECLIPSE中。

2. 新建一个JSP页面

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

4. 设置一个显示区域

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

 
   01. 
   <span style="font-size:16px;"><script>  
  
   02. 
    Ext.onReady(function(){  
  
   03. 
    var tree = new  Ext.tree.TreePanel({  
  
   04. 
    el:'tree' , 
  
   05. 
    //autoHeight :true , 
  
   06. 
     
   07. 
    border:false , 
  
   08. 
    draggable:true 
  
   09. 
     
   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>