二、建立第一个Demo。实现查数据库显示到页面

步骤：1.建立MySQL数据库表

2.整合SSH框架

3.用ExtJS显示

关键注意事项：

Ext.data.JsonReader中root的含义，比如，请求的action返回的JSON

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

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,

        width: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

初探ExtJS（2）的更多相关文章

  1. ExtJS初探：了解 Ext Core

    Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext ...

  2. ExtJS初探：在项目中使用ExtJS

    注意:本文写作时间是 2013 年,所讲的 ExtJS 如今早已过时,请勿学习! -------------------------------- 今天ExtJS官网发布了ExtJS最新正式版4.2. ...

  3. Extjs面板和布局初探

    面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...

  4. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  5. ExtJS 4.2 介绍

    本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...

  6. ExtJS 4.2 第一个程序

    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...

  7. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  8. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

  9. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

随机推荐

  1. uva-211-The Domino Effect

    http://uva.onlinejudge.org/external/2/211.html http://uva.onlinejudge.org/external/2/211.pdf 题意:每一种骨 ...

  2. linux下的开源移动图像监测程序--motion编译与配置

    前几天在网上偶然看到一篇博客,是利用linxu下的开源的motion搭建嵌入式视频动态监控系统,感觉很好很强大于,是就想自己编译移植一下试试. 所谓移动图像监测,简单来说就是利用摄像头定点监测某个区域 ...

  3. 2015年十大热门Android开源新项目

    2015年十大热门Android开源新项目 2015 即将结束,又到了大家喜闻乐见的年终盘点时刻啦,今天给大家盘点一下 2015 年 Android 开发领域新出现的 10 大热门开源项目.数据来自于 ...

  4. Android入门之login设计

    效果图: MainActivity.java package jk.quickpay.login; import jk.quickpay.login.FileService; import java. ...

  5. 【ThinkingInC++】52、函数内部的静态变量

    /** * 书本:[ThinkingInC++] * 功能:函数内部的静态变量 * 时间:2014年9月17日18:06:33 * 作者:cutter_point */ #include " ...

  6. VSTO学习笔记（二）Excel对象模型

    原文:VSTO学习笔记(二)Excel对象模型 上一次主要学习了VSTO的发展历史及其历代版本的新特性,概述了VSTO对开发人员的帮助和效率提升.从这次开始,将从VSTO 4.0开始,逐一探讨VSTO ...

  7. hdu3605（最大流+状态压缩）

    传送门:Escape 题意:给出每个人适合住的星球信息和该星球能住多少人 ,第一行给出n m 代表有 n 个人 m 个星球,然后接下来n行每行m个数字 1代表适合第 i 个星球 0 代表不适合第 i ...

  8. Wix学习整理（5）——安装时填写注册表

    原文:Wix学习整理(5)--安装时填写注册表 一 Microsoft操作系统的注册表 什么是注册表? 注册表是Mircrosoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信 ...

  9. poj3126（bfs）

    题目链接:http://poj.org/problem?id=3126 题意:给两个四位数n,m,将n变成m需要多少步,要求每次只能改变n的某一位数,即改变后的数与改变前的数只有一位不同,且每次改变后 ...

  10. BGP拓扑错误模拟配置

    R1配置 --------------------------------------------- version 5.20, ESS 2207P45# sysname RT1# super pas ...