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);//创建本地storevar 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()来载入storefunction 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/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.directwebremoting.org/schema/spring-dwrhttp://www.directwebremoting.org/schema/spring-dwr-2.0.xsdhttp://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsdhttp://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"><bean id="dwrTable" class="com.dwr.util.DwrTable"><dwr:remote javascript="DwrTable"><dwr:include method="createTable"/></dwr:remote></bean></beans>