二、建立第一个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. 数组去重Array

    var aee3=[31,42,13,19,5,11,8,13,40,39,1,8,44,15,3]; Array.prototype.unqu2=function(){ this.sort(); v ...

  2. ZXing拍摄代码扫描之后以区分一维码、二维码、其他代码

    我怎么有二维码没有联系,最近遇到一个问题,,如何推断条码扫描到一维代码或者二维代码,辛苦了一个下午下班后自己,加上网上跟踪信息. 总结出两种方式能够解决该问题(推荐採用另外一种方式): 1.改动源代码 ...

  3. UDP 通信

    import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress; public ...

  4. postgresql优化数据的批量插入

    原文:http://www.cnblogs.com/mchina/archive/2012/08/11/2537393.html 有以下几种方法用于优化数据的批量插入. 1. 关闭自动提交:      ...

  5. oschina 手机/移动开发

    手机/移动开发 Android UI 组件(167) React Native 相关(8) 网站客户端(16) NativeScript 插件(18) iPhone/iPad开发工具(16) WP7开 ...

  6. poj 1198 hdu 1401 搜索+剪枝 Solitaire

    写到一半才发现能够用双向搜索4层来写,但已经不愿意改了,干脆暴搜+剪枝水过去算了. 想到一个非常水的剪枝,h函数为  当前点到终点4个点的最短距离加起来除以2.由于最多一步走2格,然后在HDU上T了, ...

  7. poj1947(树形dp)

    题目链接:http://poj.org/problem?id=1947 题意:给n(n<=150)个点的一棵树,求删掉最少边数k使得最后该树只剩下p(1<=p<=n)个节点.(求最小 ...

  8. 解决：Determining IP Information for eth0 一直停留 无法进入系统

    问题场景: vm centos6.4网卡之前一直没异常,可今天启动时一直卡在Determining IP Information for eth0,无法进入系统.网上说了非常多办法,大多都是不着边的说 ...

  9. Java http数据MD5、AES、DES加密

    一,数据加密 1.提供了,md5,Hex,Sha等不可逆算法加密 2.AES加密,此加密方式瘦平台影响较重,所以只适合同类平台加密解密 3.DES自定义加密,跨平台,兼容性好 1.org.apache ...

  10. Java流读写

    写: package com.wjy.write; import java.io.BufferedWriter; import java.io.FileOutputStream; import jav ...