初探ExtJS(2)
二、建立第一个Demo,实现查数据库显示到页面 步骤:1.建立MySQL数据库表 2.整合SSH框架 3.用ExtJS显示 关键注意事项: Ext.data.JsonReader中root的含义,例如,请求的action返回的JSON 此时root属性为应这样填写:root:list 1、建立MySQL数据库,如图2-1所
二、建立第一个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; Listlist = new ArrayList (); public String list(){ person = new Person(); list = personService.getListByPerson(person, 1, 10); System.out.println(list.size()+"action+++++++++++++++++++++"); return SUCCESS; } public List getList() { return list; } public void setList(List list) { this.list = list; } }
配置struts.xml文件返回JSOn,如下所示
一定要设
3、用ExtJS显示到页面 JSP文件如下所示...
My JSP 'main.jsp' starting page
解释
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