二、建立第一个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. Android自己定义控件：老版优酷的三级菜单（效果图 + Demo）

    效果图: 制作思路: 1.先分析这个效果,事实上能够理解为把三级菜单分成level1,level2,level3,level1是始终显示的. 点击level1后,level2会出现:点击level2后 ...

  2. achieve aop through xml

    The main way to achive AOP is deploying a xml file. Now a xml file is presented to be a explanation ...

  3. acdream 1222 Quantization Problem [dp]

    称号:acdream 1222 Quantization Problem 题意:给出一个序列 a ,然后给出一个 n * m 的矩阵,让你从这个矩阵中选出一个序列k,使得sum(abs(ki - ai ...

  4. 使用ILmerge合并Exe、Dll文件的帮助类

    原文:使用ILmerge合并Exe.Dll文件的帮助类 using System; using System.Collections.Generic; using System.Text; using ...

  5. [开源]C#二维码生成解析工具，可添加自定义Logo (转)

    二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...

  6. .Net程序猿乐Android开发---(4)注册页面布局

    接下来我们介绍的登陆页面布局,在本节中,我们看一下注册页面布局,页面布局大同小异,来一起熟悉下基本控件的使用方法. 效果图: 1.加入注冊页面 右键选中layout目录,加入注冊页面.例如以下图 点击 ...

  7. Java注解全面解析（转）

    1.基本语法 注解定义看起来很像接口的定义.事实上,与其他任何接口一样,注解也将会编译成class文件. @Target(ElementType.Method) @Retention(Retentio ...

  8. malloc函数的一种简单的原理性实现

    malloc()是C语言中动态存储管理的一组标准库函数之一.其作用是在内存的动态存储区中分配一个长度为size的连续空间.其参数是一个无符号整形数,返回值是一个指向所分配的连续存储域的起始地址的指针 ...

  9. hdu1520（树形dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 题意:举办一个party,候选人当中有很多人之间有上下级关系,求没有直接上下级的最多的人数. 分 ...

  10. Tomcat6 Session建立机制简要

    底:  测试部门做压力测试, 结果没多久新闻,出现OutOfMemory. 查找原因,通过监视工具,查找StandardSession(org.apache.catalina.session.Stan ...