ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。 Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定 义。 看下面的代码:
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
renderTo:Ext.getBoyd(),
root:new Ext.tree.AsyncTreeNode({
text:"根节点"
}),
width:100
});
});
执行程序,
点击树中的“根节点”则会一直发现树会尝试加载这个节点的子节点,由这里没有指定树的加载器,所以“根节点”会变成一直处于加载的状态。如下图所示:
对于普通的TreeNode来说,可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。
TreeNode与AsyncTreeNode可以同时使用,比如下面的代码:
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"
});
var c1=new Ext.tree.TreeNode({
text:"子节点1"
})
var c2=new Ext.tree.AsyncTreeNode({
text:"子节点2"
});
root.appendChild(c1);
root.appendChild(c2);
var tree=new Ext.tree.TreePanel({
renderTo:Ext.getBody(),
root:root,
width:300,
loader:new Ext.tree.TreeLoader({
applyLoader:false,
url:"treedata.js"
})
});
});
treedata.js中的内容仍然是:
[{
id: 1,
text: '子节点'
}]
执行上面的程序可以得到一棵如下图所示的树:
对于ExtJS中的树来说,树加载器TreeLoader是一个比较关键的部件,树加载器由Ext.tree.TreeLoader类定义,只有AsyncTreeNode才会使用TreeLoader。看下面的代码:
这里要注意,入股你把treedata.js的内容: [{
id: 1,text: '子节点'
}] 直接写到url是不行的,一定要通过向服务器加载才能加载出数据,不然就读取不到数据,我也是试了很久才发现的,我之前是直接写到url里面
<script>
Ext.onReady(function(){
var loader=new Ext.tree.TreeLoader({
url:'<%=request.getContextPath()%>/jsp/js/treedata.js'
});
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"根节点",
loader:loader
});
var tree=new Ext.tree.TreePanel({
root:root,
renderTo:Ext.getBody()
});
});
</script>
首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象,构造 函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode,在该节点中指定该节点的 laoder为前面定义的loader。执行这段程序,在点击“根节点”时,会从服务器端指定root节点的子节点信息。
TreeLoader严格来说是针对树的节点来定义的,可以给树中的每一个节点定义不同的TreeLoader,默认情况下,如果一个 AsyncTreeNode节点在准备加载子节点的时候,如果该节点上没有定义loader,则会使用TreePanel中定义的loader作为加载 器。因此,我们可以直接在TreePanel上面指定loader属性,这样就不需要给每一个节点指定具体的TreeLoader了。
转自:http://hkaimin.blog.163.com/blog/static/199697052201243111194372/