ext整合dwr的小例子

第一步：写个index.jsp页面。

<%@ page contentType="text/html;charset=utf-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>dwr与ext整合</title>
    </head>
    <body>
        <h1>dwr与ext整合</h1>
        <hr>
        <ol>
            <li><a href="1.jsp">无侵入式整合dwr和ext</a></li>
            <li><a href="2.jsp">DWRProxy</a></li>
            <li><a href="3.jsp">DWRTreeLoader</a></li>
            <li><a href="4.jsp">DWRProxy和Combobox</a></li>
        </ol>
    </body>
</html>

第二步：分别写出1、2、3、4.jsp.

1.jsp

<%@ page contentType="text/html;charset=utf-8"%>
   <%
    String ctx = request.getContextPath();
    //String ext = ctx + "/ext-3.0.0";
    pageContext.setAttribute("ctx", ctx);
   // pageContext.setAttribute("ext", ext);
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无侵入式整合dwr和ext</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
        <script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';

Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'性别',dataIndex:'sex'},
        {header:'邮箱',dataIndex:'email'},
        {header:'电话',dataIndex:'tel'},
        {header:'添加时间',dataIndex:'addTime'},
        {header:'备注',dataIndex:'descn'}
    ]);

    var store = new Ext.data.JsonStore({
        fields: ["id","name","sex",'email','tel','addTime','descn']
    });

    // 调用dwr取得数据
    infoManager.getResult(function(data) {
        store.loadData(data);
    });

    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        autoHeight:true,
        store: store,
        cm: cm

    });

});
        </script>
    </head>
    <body>
        <h1>无侵入式整合dwr和ext</h1>
        <a href="index.jsp">返回</a>
        <hr>
        <div id="grid" style="height:300px;"></div>
    </body>
</html>

2.jsp

<%@ page contentType="text/html;charset=utf-8"%>
<%
    String ctx = request.getContextPath();
    //String ext = ctx + "/ext-3.0.0";
    pageContext.setAttribute("ctx", ctx);
    //pageContext.setAttribute("ext", ext);
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>DWRProxy</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
        <script type="text/javascript" src="DWRProxy.js"></script>
        <script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';

Ext.onReady(function(){

    var info = Ext.data.Record.create([
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'sex', type: 'int'},
        {name: 'email', type: 'string'},
        {name: 'tel', type: 'string'},
        {name: 'addTime'},
        {name: 'descn', type: 'string'}
    ]);

    var store = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(infoManager.getItems, true),
        reader: new Ext.data.ListRangeReader({
            totalProperty: 'totalSize',
            root: 'data',
            id: 'id'
        }, info),
        remoteSort: true
    });

    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        //autoHeight: true,
        height:500,
        store: store,
        cm: cm,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    store.load({params:{start:0,limit:10}});

});
        </script>
    </head>
    <body>
        <h1>DWRProxy</h1>
        <a href="index.jsp">返回</a>
        <hr>
        <div id="grid" style="height:300px;"></div>
    </body>
</html>

3.jsp

<%@ page contentType="text/html;charset=utf-8"%>
<%
    String ctx = request.getContextPath();
    //String ext = ctx + "/ext-3.0.0";
    pageContext.setAttribute("ctx", ctx);
    //pageContext.setAttribute("ext", ext);
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>DWRTreeLoader</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/interface/treeNodeManager.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
        <script type="text/javascript" src="DWRTreeLoader.js"></script>
        <script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';

Ext.onReady(function(){

    var tree = new Ext.tree.TreePanel({
        el: 'tree',
        loader: new Ext.tree.DWRTreeLoader({dataUrl: treeNodeManager.getTree})
    });

    var root = new Ext.tree.AsyncTreeNode({
        id: '0',
        text:'偶是根'
    });

tree.setRootNode(root);
tree.render();

root.expand();

});
        </script>
    </head>
    <body>
        <h1>DWRTreeLoader</h1>
        <a href="index.jsp">返回</a>
        <hr>
        <div id="tree" style="height:300px;"></div>
    </body>
</html>

4.jsp

<%@ page contentType="text/html;charset=utf-8"%>
<%
    String ctx = request.getContextPath();
    //String ext = ctx + "/ext-3.0.0";
    pageContext.setAttribute("ctx", ctx);
    //pageContext.setAttribute("ext", ext);
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>DWRProxy和ComboBox</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
        <script type="text/javascript" src="DWRProxy.js"></script>
        <script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';

Ext.onReady(function() {

    var info = Ext.data.Record.create([
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]);

    var combo = new Ext.form.ComboBox({
        store: store,
        displayField: 'name',
        valueField: 'id',
        triggerAction: 'all',
        typeAhead: true,
        mode: 'remote',
        emptyText: '请选择',
        selectOnFocus: true
    });
    combo.render('combo');

});
        </script>
    </head>
    <body>
        <h1>DWRProxy和ComboBox</h1>
        <a href="index.jsp">返回</a>
        <hr>
        <div id="combo" style="height:300px;"></div>
    </body>
</html>

第三步：

public class Info { //实体类s
    private long id;
    private String name;
    private int sex;
    private String email;
    private String tel;
    private Date addTime;
    private String descn;

加上get和set方法。

package dwr;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;

public class InfoManager {
    private List infoList = new ArrayList();
    public InfoManager() {
        for (int i = 0; i < 30; i++) {
            Info info = new Info();
            info.setId(i);
            info.setName("name " + i);
            info.setSex(i%2);
            info.setEmail("xyz20003@gmail.com");
            info.setTel("" + i);
            info.setAddTime(new Date());
            info.setDescn("descn " + i);

            infoList.add(info);
        }
    }

    public List getResult() {
        return infoList;
    }

    public ListRange getItems(Map conditions) {
        int start = 0;
        int pageSize = 10;
        // int pageNo = (start / pageSize) + 1;

        try {
            start = Integer.parseInt(conditions.get("start").toString());
            pageSize = Integer.parseInt(conditions.get("limit").toString());
            // pageNo = (start / pageSize) + 1;
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        int end = start + pageSize;
        if (end > infoList.size()) {
            end = infoList.size();
        }
        List list = infoList.subList(start, end);
        return new ListRange(list.toArray(), infoList.size());
    }

}

package dwr;

import java.io.Serializable;
public class ListRange implements Serializable {
private Object[] data;
private int totalSize;

    public ListRange(Object[] data, int totalSize) {
        this.data = data;
        this.totalSize = totalSize;
    }

    public Object[] getData() {
        return data;
    }
    public void setData(Object[] data) {
        this.data = data;
    }

    public int getTotalSize() {
        return totalSize;
    }
    public void setTotalSize(int totalSize) {
        this.totalSize = totalSize;
    }
}

public class TreeNode {
    private String id;
    private String text;
    private boolean leaf;

public TreeNode() {
}

    public TreeNode(String id, String text, boolean leaf) {
        this.id = id;
        this.text = text;
        this.leaf = leaf;
    }

加上getset方法

package dwr;
import java.util.List;
import java.util.ArrayList;

public class TreeNodeManager {

    public List getTree(String id) {
        List list = new ArrayList();
        String seed1 = id + 1;
        String seed2 = id + 2;
        String seed3 = id + 3;
        list.add(new TreeNode(seed1, "" + seed1, false));
        list.add(new TreeNode(seed2, "" + seed2, false));
        list.add(new TreeNode(seed3, "" + seed3, true));
        return list;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="infoManager">
            <param name="class" value="dwr.InfoManager"/>
            <include method="getResult"/>
            <include method="getItems"/>
        </create>
        <create creator="new" javascript="treeNodeManager">
            <param name="class" value="dwr.TreeNodeManager"/>
            <include method="getTree"/>
        </create>
        <convert converter="bean" match="dwr.Info"/>
        <convert converter="bean" match="dwr.ListRange"/>
        <convert converter="bean" match="dwr.TreeNode"/>
    </allow>
</dwr>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">

    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
    </servlet>

    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

</web-app>