初探ExtJS(2)
二、建立第一个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)的更多相关文章
- ExtJS初探:了解 Ext Core
Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext ...
- ExtJS初探:在项目中使用ExtJS
注意:本文写作时间是 2013 年,所讲的 ExtJS 如今早已过时,请勿学习! -------------------------------- 今天ExtJS官网发布了ExtJS最新正式版4.2. ...
- Extjs面板和布局初探
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
- ExtJS 4.2 第一个程序
本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
- ExtJS 4.2 业务开发(一)主页搭建
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...
随机推荐
- Struts 2.x仍然明显落后于时代。 Struts 2.x这一类老牌Web MVC开发框架仅能用于开发瘦客户端应用,无法用来开发对于交互体验要求更高的应用。
后来我在工作中陆续使用过Struts 1.x和Struts 2.x.我曾经把一个开源的基于Struts 1.x的自助式广告联盟应用移植到Spring MVC,还基于Struts 2.x做过网站开发.S ...
- Thrift反序列化导致OOM(转)
概述 最近线上的日志处理服务偶尔会出现Out Of Memory的问题,从Exception的call stack中顺藤摸瓜,最终定位到是thrift反序列化的问题. 发现问题 先交代一下问题现场: ...
- oschina Web应用开发
Web应用开发 SPDY开发包(13) HTML5开发相关(105) Pjax相关项目(4) 网站API(93) REST/RESTful项目(72) 响应式 Web 框架(27) 微信相关软件(63 ...
- SendMessage发送自定义消息及消息响应
控件向父窗体发送自定义消息,父窗体定义处理此消息的函数 效果描述: 指定哪个类添加自定义消息:(当然这个类必须是CmdTarget的子类,不然不能处理消息) 添加消息 实现消息函数:(wParam ...
- 2-13. 平均两个有序序列(25)(ZJU_PAT 名单 | 排列 )
主题链接:http://pat.zju.edu.cn/contests/ds/2-13 已知有两个等长的非降序序列S1, S2, 设计函数求S1与S2并集的中位数.有序序列A0, A1-AN-1的中位 ...
- 2014鞍山现场赛C题HDU5072(素筛+容斥原理)
Coprime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total ...
- 服务器编程入门(4)Linux网络编程基础API
问题聚焦: 这节介绍的不仅是网络编程的几个API 更重要的是,探讨了Linux网络编程基础API与内核中TCP/IP协议族之间的关系. 这节主要介绍三个方面的内容:套接字( ...
- STP学习总结
STP学习总结 STP是广泛应用在二层的具有冗余的网络中用来消除环路的一种机制,当然二层环网中用来消除环路的技术还有RRPP和H3C的smart-link技术等. 一.STP的一些基本概念 STP是I ...
- BNUOJ34973Liserious战队
Liserious战队 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class ...
- Mutex(测量)
游标共享怎样使用Mutex kks 使用mutex以便保护对于下述基于parent cursor父游标和子游标child cursor的一系列操作 对于父游标parent cursor的操作: 基于发 ...