extjs调用dwr回到的json数据
日期：2014-05-16 浏览次数：20363 次
extjs调用dwr返回的json数据
1.近期公司使用extjs做ui界面，并用dwr远程访问javabean取得json数据。网上搜了一天，不能用.用一天的时间终于自学成才，回头看一下原来就这么简单，现将心得与大家分享，菜鸟级别，有问题请指正！
?
2.首先是index.jsp代码，表格的绘制用extjs实现。<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>extjs&dwr</title> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/ext-4.0.7/resources/css/ext-all.css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/ext-4.0.7/bootstrap.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/ext-4.0.7/ext-all.js"></script> <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'></script> <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'></script> <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/DwrTable.js'></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> </body> </html>
?
3.DwrTable.java代码，只是返回一个json字符串package com.dwr.util;
public class DwrTable {
/**
* 返回json数组字符串
* @return String
* @throws Exception
*/
public String createTable() throws Exception {
String str = "[{id: 1,name: 'Ed Spencer',phoneNumber: '555 1234'},{id: 2,name: 'Abe Elias',phoneNumber: '666 1234'}]";
return str;
}
}
?
4.表格的绘制用extjs实现，下面是index.js代码，这是dwr和extjs结合的重点Ext.onReady(function(){
//调用dwr取得返回的json字符串
DwrTable.createTable(callBack);
//创建本地store
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
//创建grid显示数据
Ext.create('Ext.grid.Panel', {
title: 'Date Column Demo',
store: store,//这里的store是上边定义的本地store
columns: [
{ text: 'id', dataIndex: 'id', flex: 1 },
{ text: 'name', dataIndex: 'name' },
{ text: 'phone', dataIndex: 'phone' }
],
height: 200,
width: 450,
renderTo: Ext.getBody()
});
//在callBack函数调用store.loadData()来载入store
function callBack(dat){
store.loadData(Ext.decode(dat));//Ext.decode(dat)将字符串转成json数组
};
});
?
5.dwr的配置在spring的配置文件application.xml中代码如下，这里可以通过网上搜一下在web.xml中配置<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.directwebremoting.org/schema/spring-dwr
http://www.directwebremoting.org/schema/spring-dwr-2.0.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd"><bean id="dwrTable" class="com.dwr.util.DwrTable">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
