整合ext和dwr 的小例子

it2025-10-08 5

第一步：写个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 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>

转载于:https://www.cnblogs.com/kunpengit/articles/2249587.html

相关资源：数据结构—成绩单生成器

最新回复(0)