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

学习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 class="aged2"><script type="text/javascript">a("article_content_down");</script></div> </div> <div id="pagebox" > <a href="/jiaocheng/javascript/" target="_blank">查看更多</a> <A href="/jiaocheng/20120302/1347785.html" title="[转贴]绝好的日期控件(My97DatePicker2.0)正式版发布(跨浏览器,跨框架,支持时间选择,自定义格式,动态切换皮肤等等),顶上去大家一起分享啊解决">下一篇</A></div> <div id="MainLeftll"> <div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.net/jiaocheng/20120620/1347786.html">https://www.reader8.net/jiaocheng/20120620/1347786.html</a></div> <div class="related"><span class="relatedIco1">读书人精选</span> <ul class="relatedList"> </ul> </div> <div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div> <div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div> </div> </div> <!-- 文章正文左边结束 --> <!-- 文章正文右边开始 --> <div class="leftbox_r"> <div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> <div class="Rtitle"> <span class="Rtitle_text">热点排行</span></div> <div class="RContl"> <ul> <li><a href="/jiaocheng/20140123/1427621.html" target="_blank">js === 跟 == 的区别</a></li> <li><a href="/jiaocheng/20120403/1382181.html" target="_blank">setTimeout有关问题</a></li> <li><a href="/jiaocheng/20130122/1393681.html" target="_blank">jsp页面添<base href="<%=basePath%>">则</a></li> <li><a href="/jiaocheng/20130626/1363196.html" target="_blank">javascript变量值丢掉,alert后又出现</a></li> <li><a href="/jiaocheng/20120316/1411721.html" target="_blank">怎么使用户在输入数据时，自动验证格式是</a></li> <li><a href="/jiaocheng/20130912/1431203.html" target="_blank">关于在JS中,子窗口刷新父窗口,子窗口仍保</a></li> <li><a href="/jiaocheng/20120901/1431840.html" target="_blank">j2ee1.4跟javaee5区别，jstl1.1和jstl1.</a></li> <li><a href="/jiaocheng/20120821/1341933.html" target="_blank">ExtJS报表——行号、复选框、选择模型</a></li> <li><a href="/jiaocheng/20131011/1419356.html" target="_blank">这个有关问题困扰小弟我好长时间了</a></li> <li><a href="/jiaocheng/20121123/1401984.html" target="_blank">JSON错误</a></li> </ul> </div> <div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div> <!-- 文章正文右边结束 --> </div> <!--主体结束--> <script type="text/javascript">a("article_down_up");</script> <script type="text/javascript">a("foot");</script> <script type="text/javascript">a("article_down_up2");</script> <!--主体结束--> <div style="display:none"> <!--百度统计代码--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script type="text/javascript">a("allbt");</script> </body> </html>