学习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节点

</p><p> </p><p> </p><p> 到此为止，最简单的树形结构就完成了，虽然不过华丽，但是这几句简单的代码就是我日后完成我权限显示树形结构的基石。框架出世，WEB世界完美，其实，不然，基石铺垫，一切才完美。</p><dl class="comment_item comment_topic"><dt class="comment_head">3楼wj539h昨天 23:41<dd class="comment_body">There is no difference with the ext2 which i had once used 4 years ago.</dl><dl class="comment_item comment_topic"><dt class="comment_head">2楼lfmilaoshi昨天 15:15<dd class="comment_body">框架出世，WEB世界完美，其实，不然，基石铺垫，一切才完美。n米老师</dl><dl class="comment_item comment_topic"><dt class="comment_head">1楼liushuijinger昨天 01:42<dd class="comment_body">大道至简写完了？</dl> </p></div><div style="margin:0 auto;width:300px;height:250px;position:relative;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 移动端全站正文 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6147101717324856" data-ad-slot="1958144088" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/javascript/">JavaScript</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20120319/1335589.html">js控制iframe跳转解决方法</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20120924/1405944.html">js怎么去改变某个嵌套的iframe内容的文</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140608/2370002.html">JavaScript中按位“异或”赋值运算符</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140608/2370001.html">理解JavaScript的caller,callee,call,</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140607/2366392.html">jstack和线程dump分析</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140608/2370000.html">ajax与jsp总结</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140607/2366394.html">怎么用js处理zip文件</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140607/2366393.html">js惯用处理</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140605/2358862.html">那个大神会指导个正则</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140605/2358861.html">ExtJS4 格局及边框</a></p></li> </ul></div><div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></div> <div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120620/1347786.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div> <script language="javascript"> function clickme(sad){ var divobjdiv = document.getElementById("divobjdiv" + sad); if(divobjdiv.style.display =="none"){ divobjdiv.style.display ="block"; }else{ divobjdiv.style.display ="none"; } var wenzi = document.getElementById('divobjimg' + sad); if(wenzi.innerText == "收起"){ wenzi.innerText = "查看更多"; }else{ wenzi.innerText = "收起"; } } </script> <div id="back-top"><a href="#top"><span></span></a></div> </body> </html>