二、建立第一个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 实现自己定义多级树控件和全选与反选的效果

    博文開始之前,首先要感谢大牛:(lmj623565791),本博文是在其博文http://blog.csdn.net/lmj623565791/article/details/40212367基础上进 ...

  2. jquery.ui.accordion的修改（支持展开多个）

    原文:jquery.ui.accordion的修改(支持展开多个) 背景:原jquery.ui.accordion插件,最多只能展开一个,不能展开多个,后来在网上找到了一个基于它的一个修改版(http ...

  3. fs学习笔记之输出格式

    接触fs那么久,有必要再记录一下. 上一篇介绍了fs拓扑描写叙述文件dot的格式,今天要介绍fs输出文件的格式. 举个样例,下面是d节点输出文件的一行记录,也就是一条流经过d的记录. textexpo ...

  4. Apache配置虚拟文件夹

    作为一个Android开发人员,一直以为,至少应该有一个server语言,最近慢慢学习php,当然学习Apache使用.本文介绍Win7环境下,怎样配置Apache的虚拟文件夹. 首先,找到我们Apa ...

  5. 关于windows系统影子账户的问题

    在这之前,需要大家了解几个问题,一个是SID,一个是账号的F值. Windows账户的SID 在Windows系统中,系统会为每个用户账户建立一个唯一的安全标识符(Security Identifie ...

  6. HTC one/M7电信802d 毒蛇ViperOne2.1.0/高级毒蛇工具/完美root,精简/更多自定义,稳定,流畅ROM

    ROM版本 HTC One/M7 802d ROM作者 雪狼团队·大盛 http://weibo.com/DaShengdd Android版本 Android 4.2.2 创建日期 2013.09. ...

  7. Android在子线程中更新UI(二)

    MainActivity如下: package cc.testui2; import android.os.Bundle; import android.view.View; import andro ...

  8. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  9. hdu 4685 Prince and Princess（匈牙利算法 连通分量）

    看了别人的题解.须要用到匈牙利算法的强连通算法 #include<cstdio> #include<algorithm> #include<vector> #pra ...

  10. poj1655（树形dp）

    题目链接:http://poj.org/problem?id=1655 题目大意:给一个树,删除其中一个点就会形成一个森林,点的平衡度为删除了这个节点后,所形成多个树,其中组成树的节点最多,节点个数就 ...