欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

初探ExtJS(2)

程序员文章站 2022-05-17 18:23:46
...

二、建立第一个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

初探ExtJS(2)

此时root属性为应这样填写:root:list

1、建立MySQL数据库,如图2-1所示

初探ExtJS(2)

图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 list = 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中的解释如下所示

初探ExtJS(2)

此时用到的只是第一个参数,后面两个参数没有用到

2)var proxy = new Ext.data.HttpProxy({url:'list.action'});
请求action,其中返回的数据为

初探ExtJS(2)

封装到了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所示

初探ExtJS(2)

图2-3



源码下载地址:http://download.csdn.net/detail/hhxin635612026/7602631