extjs tree

jamm19860411

浏览: 86565 次
性别:
来自: 北京

最近访客更多访客>>

fatzhan

ynduanlian

bustersword

mft8899

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (55)

社区版块

存档分类

EXT json WebForm JPA 应用服务器

        最近在学习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就能看到这个树了，大致如下图所示：

原址：http://www.easyjf.com/blog/html/20080110/1048579.html

分享到：