二、建立第一个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. 飘逸的python - yield简明教程

    发现还有非常多人对yield不理解,云里雾里,于是试着用文字表述. 仅仅要函数含有yield语句,它就返回一个生成器.所以我们与其把其看成函数定义,不如看作是生成器定义.函数用return返回,而生成 ...

  2. ZOJ 1171 Sorting the Photos

    1. 题目描述 给你一叠照片,有的正面朝上,有的反面朝上,朝上的用字母U,朝下的用字母D 可以从一个位置开始到最顶端,把这一叠拿出来,反转,然后再放回那一叠照片上面. 试求出最少的翻转次数,使所有的照 ...

  3. 怎么获取Spring的ApplicationContext

    在 WEB 开发中,可能会非常少须要显示的获得 ApplicationContext 来得到由 Spring 进行管理的某些 Bean, 今天我就遇到了,在这里和大家分享一下, WEB 开发中,怎么获 ...

  4. KFC - About KFC - Quality Assurance

    KFC - About KFC - Quality Assurance Restaurant Quality The main attributes for KFC restaurant excell ...

  5. HLG 2163 方格取数 （最大网络流）

    题目链接:  m=ProblemSet&a=showProblem&problem_id=2163">点击打开链接 Description : 给你一个n*n的格子的棋 ...

  6. Keil - 编译错误总结 01

    Keil 编译 STM32project,出现下述错误. 并且.   Options for Target  -> Output   -  Browse  Information 选项无法勾选. ...

  7. 手机装linux系统

    第一步: 首先 , 你的手机需要获取root权限. 如果不知道如何获取, 可以到电脑上搜索一下安卓手机root教程. 不同品牌的手机root的方法不同. 也可以到机锋论坛上寻找root的具体方法. 第 ...

  8. tomcat dbcp 基于jndi当配置java.sql.SQLException: Already closed

    最近发现了一个现象,观察到的生产环境,不要有一段时间操作,然后另一个操作,首先将有一个数据库连接:java.sql.SQLException: Already closed.,例如下列: error ...

  9. C#的百度地图开发(一)发起HTTP请求

    原文:C#的百度地图开发(一)发起HTTP请求 百度地图的开发文档中给出了很多的事例,而当用到具体的语言来开发时,又会有些差异.我是使用C#来开发的.在获取相应的数据时,需要通过URL传值,然后获取相 ...

  10. TF卡分区

    http://bbs.gfan.com/android-5176910-1-1.html http://www.miui.com/thread-2302600-1-1.html http://www. ...