运用ExtJS2构造动态异步加载的树
日期：2014-05-16 浏览次数：20451 次
使用ExtJS2构造动态异步加载的树
使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。
1. 下载ExtJS2，地址：http://www.extjs.com/
?? 下载Ext JS 2.1 SDK：ext-2.1.zip。
?? examples文件夹下全部是ExtJS例子演示程序。
?? ExtJS2主要的会用到以下几个文件：ext-all.css、ext-base.js、ext-all.js，使用方法可以参考Demo。
?? Ext文档中心：
????? http://www.ajaxjs.com/docs/docs/
????? http://www.jackytsu.com/extcn/docs/
2. 下载JSON-lib，地址：http://json-lib.sourceforge.net/
?? 打开网址后，首页上有一段话：
????? Json-lib requires (at least) the following dependencies in your classpath:
????? jakarta commons-lang 2.3
????? jakarta commons-beanutils 1.7.0
????? jakarta commons-collections 3.2
????? jakarta commons-logging 1.1.1
????? ezmorph 1.0.4
?? 需要下载上述jar文件，配合JSON-lib 一起使用。
??
?? commons 下载地址：http://commons.apache.org/
?? ezmorph 下载地址：http://ezmorph.sourceforge.net
?? 或者，到 http://www.docjar.com 搜索下载。
?? JSON的用法，可参考相关文档。
3. 使用ExtJS写的mytree.js文件。
?? 关于Ext.tree.TreePanel，可以参考：
?? http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html
?? mytree.js代码如下：
--------------------------------------
Ext.onReady(function(){
?? var Tree = Ext.tree;
?? //定义根节点的Loader
?? var treeloader=new Tree.TreeLoader({dataUrl:'tree.jsp?DID=1'});
?? //异步加载根节点
?? var rootnode=new Tree.AsyncTreeNode({
??????? id:'1',
??????? text:'目录树根节点'
??????????????? });
????
?? var treepanel = new Tree.TreePanel({
??????????????? //renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
??????????????? el:'tree_div',??????? //填充区域
??????????????? rootVisible:true,???? //隐藏根节点
??????????????? border:true,????????? //边框
??????????????? animate:true,???????? //动画效果
??????????????? autoScroll:true,????? //自动滚动
??????????????? enableDD:false, ?????? //拖拽节点?????????????
??????????????? containerScroll:true,
??????????????? loader:treeloader????????????
??????????? });
?? //设置根节点
?? treepanel.setRootNode(rootnode);
?? //响应事件，传递node参数
?? treepanel.on('beforeload',
??????????????? function(node){
?????????????????? treepanel.loader.dataUrl='tree.jsp?DID='+node.id;??? //定义子节点的Loader???
??????????????? });
?? treepanel.render();???????????
?? rootnode.expand(false,false);
});
--------------------------------------
4. 展示树的extjsTree.jsp的文件。该jsp文件调用mytree.js，展示树。
?? 注意使用到了ext-all.css、ext-base.js、ext-all.js这三个文件。
?? extjsTree.jsp代码如下：
--------------------------------------
<html>
<head>
<title>ExtJS Tree</title>
<link rel="stylesheet" type="text/css" href="../extjs/ext-all.css" />
<script type="text/javascript" src="../extjs/e
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
