第一步：写个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 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.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 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)
    });

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>

整合ext和dwr 的小例子相关推荐

  1. SSM项目小例子，SSM整合图文详细教程

    SSM项目小例子 今天来搭建一个SSM项目的小例子简单练一练,那项目模板还是我们那个模板,就是我们在JavaWeb最后的小例子,那到SSM中我们如何实现,后面我们再看看springboot中如何实现 ...

  2. python 真多线程_Python之路200个小例子，在线网页版来了，从此学习更方便！

    历史两个月,利用所有业余时间,与朋友一起搜集.创作Python小例子,截止目前已超过200个例子,全新整合汇总为九大章节: 感受Python之美 | 一.Python基础 | 二.Python字符串和 ...

  3. 这42个Python小例子，太走心~

    告别枯燥,60秒学会一个Python小例子.奔着此出发点,我在过去1个月,将平时经常使用的代码段换为小例子,分享出来后受到大家的喜欢. 一.基本操作 1 链式比较 . i = 3 print(1 &l ...

  4. windows下dlib库简介、安装问题解决及简单小例子 （python）

    一.dlib简介 Dlib是一个现代C++框架,解决包含机器学习算法以及开发复杂软件的实现问题,它被广泛应用在工业和学术研究领域,包括机器人.嵌入式设备.移动手机以及大规模高性能计算环境中,DLib的 ...

  5. python operator 多属性排序_Python之路200个小例子网页版，真诚奉献，从一而终！...

    历史两个月,利用所有业余时间,与朋友一起搜集.创作Python小例子,截止目前已超过200个例子,全新整合汇总为九大章节: 感受Python之美 | 一.Python基础 | 二.Python字符串和 ...

  6. DMETL快速入门小例子

    ※DMETL的使用通常可以分为五个主要步骤:创建数据源.创建工程. 设计转换.设计作业和查看运行日志五个步骤. 下面以一个示例说明上述过程,该示例的功能是将BOOKSHOP示例库中 的EMPLOYEE ...

  7. 42个Python实用小例子[内附200+代码地址]

    经常有同学苦恼,学了python基础之后找不到合适的练手机会.为此,有位热心人创建了一个项目,搜集整理了一堆实用的python代码小例子.这些小例子包括但不限于:Python基础.Web开发.数据科学 ...

  8. c语言连接数据库例子,c语言操作mysql数据库小例子_互帮互助（C language MySQL database operation example _ mutual help）.doc...

    这是精心收集的精品经典资料,值得下载保存阅读! c语言操作mysql数据库小例子_互帮互助(C language MySQL database operation example _ mutual h ...

  9. php函数的默认值,php函数指定默认值方法的小例子

    php函数指定默认值方法的小例子 本节内容: php函数指定默认值 在php编程中,为自定义函数设定默认值,当用户调用该函数时,如果不给参数指定值,参数会用默认值顶替. 例1, 复制代码 代码如下: ...

最新文章

  1. python详细安装步骤-Python的详细安装步骤
  2. python画圆简单代码-python实现画圆功能
  3. ArcGIS Runtime for .Net Quartz开发探秘(三)：承接来自GIS服务器的服务
  4. Django扩展xadmin后台管理
  5. bootstrap导航条文字颜色_XEditor基础组件：导航条
  6. 知乎热议：嵌入式开发中C++好用吗？
  7. C# 淘宝商品微信返利助手开发-（四）返利助手开发（2）淘宝分享的内容如何只取淘口令
  8. 计算机 64位和32位区别,32位和64位的区别
  9. edge浏览器的html文件,手把手解决win10系统利用edge浏览器共享网页的具体方法
  10. 【PyTorch】深度学习实践之 CNN基础篇——卷积神经网络跑Minst数据集
  11. 最大流 (Maximum Flow) 之 流网络和流
  12. 迭代最近邻ICP算法
  13. RPC框架简析--Pigeon
  14. android系统一直显示通知栏_Android通知栏详解
  15. 压力测试-Jmeter脚本录制方案
  16. 本体（Ontology）综述
  17. python调用adb shell命令_如何在python脚本里面连续执行adb shell后面的各种命令
  18. 电子式射频开关（电子RF开关,电子开关，RF Switch）
  19. 30个HTML+CSS前端开发案例（一）
  20. 【GitHub学生包优惠申请】学生党“白嫖”GitHub攻略2022年6月

热门文章

  1. nth-of-type和nth-child
  2. 安卓自定义注解支持和示例实现
  3. 云开发初探 —— 更简便的小程序开发模式
  4. Nagios（装包、文件类型）
  5. [Twisted] transport
  6. 文件目录在Visual C++ 2005中使用 GNU Scientific Library
  7. 作业计算机组成与原理,课程计算机组成原理与汇编语言作业四
  8. Comet OJ - Contest #3 题解
  9. 原生 js 轮播图（8）
  10. 初始化git仓库，并push到远端