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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值