最近在学习ExtJS，发现其服务器端是php，这一点对我们搞java的有点不厚道啊。昨天学习了ExtJS的树，并做了一棵异步更新的树出来，后台的业务逻辑及持久层使用JPA+Spring2.5实现，发下面把步骤贴出来与大家分享。
首先准备树的域模型，下面是一地区的域模型对象， Region.java 的代码如下：
@Entity
public class Region 
{
@Id
@GeneratedValue(strategy = GenerationType.TABLE)
private Long id;
@Field(name = " 名称 " ,validator = @Validator(name = " string " ,value = " min:2;max:50 " ,required = true ))
@Column(length = 100 )
private String name;
@Field(name = " 编码 " ,validator = @Validator(name = " string " ,value = " min:2;max:16 " ,required = true ))
@Column(length = 100 )
private String code;
@POLoad(name = " parentId " )
@ManyToOne
private Region parent;
@OneToMany(mappedBy = " parent " ,fetch = javax.persistence.FetchType.EAGER)
private List < Region > children = new java.util.ArrayList < Region > ();
public Long getId() {
return id;
}
public void setId(Long id) {
this .id = id;
}
Region域模型有parent，也有children，这个完全是一个树的结构，如果把树根砍了话就变成森林了，呵呵这一点跟现实不一样。其它都是setter及getter方法，这里就不多说了。
然后我们就要做针对这个地区信息的添删除改查了。呵呵，添删改查我最拿手了，特别是基于EJS(EasyJWeb+JPA+Spring2)构架的添删改查，一个命令搞定了。这里就不多说了，大家可以直接看我前段时间做的视频演示(http://www.easyjf.com/blog/html/20080102/1015814.html)。当然这个示例由于是分级别的，所以生成的添删改查还要改一改，才支持上下级管理功能。
下面进入我们重点部分，如何在页面中得到一棵表示地区的树。
首先准备一个tree.html，内容如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS－树示例</title>
<link rel="stylesheet" type="text/css" href="/plugins/extjs/ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div align="center">
<p>ExtJS－树的示例</p>
</div>
<div id="tree-div"></div>
</body>
</html>
注意几个<script>标签，他们是用来引入ext的js以及本示例中用到的树。tree.js的代码如下：
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.0/resources/images/default/s.gif';
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:"tree-div",
autoScroll:true,
animate:true,
width:'100px',
height:'300px',
enableDD:true,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'region.ejf?cmd=getRegion'
})
});
tree.on("click",function(node,event){alert(node.id);});
tree.on('beforeload',function(node){
tree.loader.dataUrl = 'region.ejf?cmd=getRegion&id='+(node.id!='root'?node.id:"");
});
var root = new Ext.tree.AsyncTreeNode({
text: '地区信息',
draggable:false,
id:'root'
});
tree.setRootNode(root);
tree.render();
root.expand();
});
其实tree.js的代码跟ExtJS官方示例中的差别不大，这里就不对这个代码作详细的解释，如果你感兴趣的话，可以在后面留言或给我发电子邮件。如果需要的人多的话，我看能否补充。这里把重点的代码强调一下。
loader: new Ext.tree.TreeLoader({
dataUrl:'region.ejf?cmd=getRegion'
})
这个表示通过region.ejf?cmd=getRegion来加载树的数据。另外，由于这里使用的是异步加载，所以还需要加下面一句：
tree.on('beforeload',function(node){
tree.loader.dataUrl = 'region.ejf?cmd=getRegion&id='+(node.id!='root'?node.id:"");
});
那么region.ejf?cmd=getRegion是做什么的呢？就是从数据库中查询地区数据，并把他转换成JSon格式就OK了。下面是RegionAction中的getRegion方法的代码，如下所示：
public Page doGetRegion(WebForm form)
{
String id=CommUtil.null2String(form.get("id"));
RegionQuery query=new RegionQuery();
query.setPageSize(-1);
if(!"".equals(id))
{
Region parent=this.service.getRegion(new Long(id));
query.setParent(parent);
}
IPageList pageList=this.service.getRegionBy(query);
List<Node> nodes=new java.util.ArrayList<Node>();
for(int i=0;i<pageList.getResult().size();i++)
{
Region region=(Region)pageList.getResult().get(i);
nodes.add(new Node(region));
}
form.addResult("json",AjaxUtil.getJSON(nodes));
return Page.JSONPage;
}
这个代码说白了，就是根据客户端的调用参数id值来加载该id下面的地区节点。RegionQuery是一个地区查询类，主要是我不想写sql或EJBQL，所以就用他了。大家主要看关键的部分，我们在调用service的getRegionBy方法返回的是一个分页的地区Entity。所以要把这个地区Entity转换成与Ext的树节点数据匹配的方式，因此就有了下面一段代码：
List<Node> nodes=new java.util.ArrayList<Node>();
for(int i=0;i<pageList.getResult().size();i++)
{
Region region=(Region)pageList.getResult().get(i);
nodes.add(new Node(region));
}
下面我们看看Node这个类的实现，代码如下：
private class Node {
private Region region;
Node(Region region)
{
this.region=region;
}
public String getId() {
return region.getId().toString();
}
public boolean getLeaf() {
return region.getChildren().size()<1;
}
public String getText() {
return region.getName();
}
public String getQtip()
{
return region.getName();
}
}
Node直接放在RegionAction中的，所以是Private的。这个Node所做的事就是把服务器的Region这个域模型适配成Ext的树状节点数据。在转换完以后，我们再看doGetRegion中的最后两句代码，如下所示：
form.addResult("json",AjaxUtil.getJSON(nodes));
return Page.JSONPage;
第一句代码是调用EasyJWeb中的AjaxUtil.getJSON方法直接把nodes这个List生成JSON数据；第二句告诉EasyJWeb这个模板使用的是JSONPage合成模板。呵呵，这个Page.JSONPage是这几天才加上去的，之前发布的m3没有，其实JSONPage模板的内容非常简单，内容如下：
function(){$!json}()
完成后，把这个Web应用打成war包，然后直接访问tree.html就能看到这个树了，大致如下图所示：
本示例已经被收录到了EasyJWeb的ajax综合示例中，里面还有更多的ajax示例，包括一个表格编辑的应用。
EasyJWeb的ajax综合示例的地址：http://easyjweb.demo.easyjf.com/ajax2/
本示例War包及源码：ftp://ftp1.easyjf.com/easyjweb/demo/ajax2.war (13M)
本示例的源码：ftp://ftp1.easyjf.com/easyjweb/demo/ajax2-src.zip (665K)
注：请下载后将db.properties里password改为你的密码。
你更希望我在“一起学ExtJS系列”中跟大家分享哪一方面的内容，请留言。
