二、建立第一个Demo。实现查数据库显示到页面
步骤：1.建立MySQL数据库表
2.整合SSH框架
3.用ExtJS显示
关键注意事项：
Ext.data.JsonReader中root的含义，比如，请求的action返回的JSON
1、建立MySQL数据库。如图2-1所看到的
图2-1
2、整合SSH框架
因为ExtJS处理的为JSON数据，则应将action返回的置为JSON格式
Action类例如以下所看到的。返回为list
package com.hanhexin.action;
import java.util.ArrayList;
import java.util.List;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import com.hanhexin.entity.Person;
import com.hanhexin.service.IPersonService;
import com.opensymphony.xwork2.ActionSupport;
@Component("personAction")
@Scope("prototype")
public class PersonAction extends ActionSupport{
private Person person;
@Autowired
private IPersonService personService;
List<Person> list = new ArrayList<Person>();
public String list(){
person = new Person();
list = personService.getListByPerson(person, 1, 10);
System.out.println(list.size()+"action+++++++++++++++++++++");
return SUCCESS;
}
public List<Person> getList() {
return list;
}
public void setList(List<Person> list) {
this.list = list;
}
}
配置struts.xml文件返回JSOn。例如以下所看到的
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="person" extends="json-default" namespace="/"> <action name="list" class="com.hanhexin.action.PersonAction" method="list"> <result name="success"></result> <result type="json"> <param name="list"></param> </result> </action> </package> </struts>
一定要设
<result type="json">...</result>3、用ExtJS显示到页面 JSP文件例如以下所看到的
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'main.jsp' starting page</title>
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" language="javascript">
Ext.onReady(function(){
/* var cm = new Ext.grid.ColumnModel([
{header:'id',dataIndex:'id'},
{header:'姓名',dataIndex:'name'},
{header:'电话',dataIndex:'phone'}
]); */
var proxy = new Ext.data.HttpProxy({url:'list.action'});
var record = Ext.data.Record.create([
{name:'id'},
{name:'name'},
{name:'phone'}
]);
var reader = new Ext.data.JsonReader({
root:'list'
},record);
var store = new Ext.data.Store({
proxy:proxy,
reader:reader
});
store.load();
var grid = new Ext.grid.GridPanel({
title:'表格',
/* cm:cm, */
columns: [
{ header: 'ID', dataIndex: 'id' },
{ header: '姓名', dataIndex: 'name', flex: 1 },
{ header: '电话', dataIndex: 'phone' }
],
store:store,
450,
height:300,
autoExpandColumn:2,
renderTo:Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>
解释
1）Ext.onReady为Ext.Loader.onReady的别名
ExtJS API中的解释例如以下所看到的
此时用到的仅仅是第一个參数，后面两个參数没实用到
2）var proxy = new Ext.data.HttpProxy({url:'list.action'});
请求action，当中返回的数据为
封装到了var proxy中
3）var record = Ext.data.Record.create()。用于解析JSON，当中属性为JSON中相相应的数据项
4）var reader = new Ext.data.JsonReader({
root:'list'
},record);
用于解析JSON。当中root为JSON中的list，即2）中的list
5）var store = new Ext.data.Store（）用于存储从action返回的。并由JsonReader解析的数据。
6）var grid = new Ext.grid.GridPanel（）用于显示数据
当中renderTo:Ext.getBody() 保证了显示到html页的body中。
4、终于效果如图2-3所看到的
图2-3
源代码下载地址：http://download.csdn.net/detail/hhxin635612026/7602631