extjs调用dwr返回的json数据

ivoter

浏览: 91423 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

gzb001

Majker

littlehehe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs dwr json

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">
		<dwr:remote javascript="DwrTable">
			<dwr:include method="createTable"/>
		</dwr:remote>
</bean></beans>

分享到：