extjs4.2.1与三大框架集成

学习这个东西真的是在做实际项目的时候能够得到很好的体现,就像我现在学习Extjs一样的,因为现在的项目需要用到extjs做页面,所以才开始研究它,像以前的话,自己根本不想主动去学习Extjs,自己主动学习技术的积极性不是很高呀,呵呵,现在要用它来做项目了,不得不去学了,今天搭建了一个框架,用的是struts、spring和extjs,为什么不用hibernate,因为这个项目数据量比较多,里面的逻辑关系也比较复杂,所以项目组讨论后不用hibernate,那么开始让我们的extjs和struts、spring整合吧!!

其实整合起来跟三大框架的整合没什么区别,只是最后一步将extjs相关文件拷贝到我们的项目中而已;

struts和spring整合,略写,我以前的博客里面讲述过:

一、新建web项目,导入struts、spring相应jar包;

二、在web.xml中设置我们的struts、spring相应的加载类和文件;

三、配置我们的spring.xml(数据源、事务等)和struts.xml文件;

四、添加我们的ext.js,我这里使用的版本是extjs4.2.1,大家可以在官网进行下载:

http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281

由于下载的文件比较大,因为它里面包含了很多的文档、源代码、示例等,所以当我们集成到项目中时,这些都是可以不用的,下面是我们需要导入的文件,大家也可以到我的资源库中进行下载集成版本extjs:

http://download.csdn.net/detail/harderxin/7546335

好了,extjs已经集成到我们的项目中了,下面我们来新建一个页面test.jsp,使用extjs需要导入一个extjs的样式文件和js文件:需要在每个使用extjs的页面中头部加上:

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/ext-all.js"></script>

下面编写我们的jsp页面:

<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			//使用静态数据创建表格
			var data=[[1,'mary','36987'],
                [2,'tom','123569'],
				[3,'jack','36985'],
				[4,'车间质检','CJZJ']];
			var store= new Ext.data.SimpleStore({data:data,fields:["id","username","password"]});

			//创建显示表格面板
			var grid=new Ext.grid.GridPanel({
				title:"人员列表",
				renderTo:"grid-div",
				width:550,
				height:200,
				store:store,
				//frame:true,
				columns:[
					{header:"用户号",dataIndex:"id"},
					{header:"姓名",dataIndex:"username"},
					{header:"密码123",dataIndex:"password"}
				]
			});
		});
	</script>
  </head>

  <body>
    <div id="grid-div" align="center"></div>
  </body>
</html>

其中Ext.onReady(function(){});是Extjs的入口,所有的Extjs函数都在在这个入口中,上面实例中我们定义了一些静态数据,放到表格面板中,如果对Extjs不了解的可以在网上查阅有关Extjs中的相关函数和帮助文档,Extjs非常强大,里面的类也很多,得靠自己去摸索学习了;

部署我们的项目倒Tomcat服务器,启动Tomcat,如果不报错,则struts和spring配置ok,在地址栏中请求我们的test.jsp页面,出现如下页面,并且js不报错,则extjs成功使用,否则你得好好查查出现的问题:

给页面动态添加数据:

上面我们的数据是自己定义了一个二维数组data,我们在实际做项目的时候,这些数据是由后台传过来的动态数据,那么怎么通过Action传给Extjs页面呢,一般传数据我们都会想到通过xml、json的方式,其实我们通过这两种方式都可以传给extjs页面,下面给大家来讲述一个通过json传给页面的方式:

1、action中像ajax请求一样,通过response.getWriter().write(jsonString);将请求发送给页面:

执行方法:

	public String execute(){
		this.items=new ArrayList<Person>();
		System.out.println("ok");
		Person person=new Person(1,"jack","26958");
		items.add(person);
		person=new Person(2,"mary","123456");
		items.add(person);
		person=new Person(3,"harderxin","136984");
		items.add(person);
		try {
			PrintWriter out=ServletActionContext.getResponse().getWriter();
			String jsonString = "{totalCount:"+3+",results:"+JSONArray.fromObject(items).toString()+"}";
			out.write(jsonString);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

struts.xml配置,因为我们集成了spring,所以类的实例化由spring去管理,struts无需写页面跳转:

<struts>
	<package name="test" namespace="/" extends="struts-default">
		<action name="testAction" class="testAction"></action>
	</package>
</struts>

2、传给一个固定的页面接收,action中需要跳转到一个页面,该页面接收jsonString:

执行方法:

	private String jsonString;

	public void setJsonString(String jsonString) {
		this.jsonString = jsonString;
	}

	public String execute(){
		this.items=new ArrayList<Person>();
		System.out.println("ok");
		Person person=new Person(1,"jack","26958");
		items.add(person);
		person=new Person(2,"mary","123456");
		items.add(person);
		person=new Person(3,"harderxin","136984");
		items.add(person);
		this.jsonString = "{totalCount:"+3+",results:"+JSONArray.fromObject(items).toString()+"}";
		return "success";
	}

struts.xml配置,跳转到相应页面:

<struts>
	<package name="test" namespace="/" extends="common">
		<action name="testAction" class="testAction">
		   <result name="success">jsondata.jsp</result>
		</action>
	</package>
</struts>

页面只接收jsonString,jsondata.jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="struts-taglib" %>
<s:property value="jsonString" escape="false" /> 

3、通过action定义属性直接转换为json数据传到页面,需要导入json-lib.jar,原理也是通过jar包将相应的类转换为json数据

定义person类:

package com.zb.test.bean;

public class Person {

	private Integer id;
	private String username;
	private String password;

	public Person(Integer id, String username, String password) {
		super();
		this.id = id;
		this.username = username;
		this.password = password;
	}

	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}

}

编写我们的action:

	private List<Person> results;

	public List<Person> getResults() {
		return results;
	}

	public void setResults(List<Person> results) {
		this.results = results;
	}

	public String execute(){
		this.results=new ArrayList<Person>();
		System.out.println("ok");
		Person person=new Person(1,"jack","26958");
		results.add(person);
		person=new Person(2,"mary","123456");
		results.add(person);
		person=new Person(3,"harderxin","136984");
		results.add(person);
		return "success";
	}

定义我们的struts.xml,此时我们的package需要继承json-default,只有这样,我们才能在result中的type使用json:

<struts>
	<package name="test" namespace="/" extends="json-default">
		<action name="testAction" class="testAction">
		   <result name="success" type="json"></result>
		</action>
	</package>
</struts>

此时转换到页面也是json数据,页面中相应字段的name的属性要和person中的属性名称一致;

上面的三种方式都可以让我们的后台传递过来的数据通过Action和Extjs页面进行交互,大家可以选择自己的配置,其目的都是一样的,将后台数据转换为json数据传递到页面,只是转换的方式不一样而已,下面来看看页面:

此时我们获取Store数据集对象方式如下:

//创建数据集对象
			var store=new Ext.data.Store({
				autoLoad:true,
				proxy:new Ext.data.HttpProxy({
					url:"testAction.do",
					method:"POST",
					reader:new Ext.data.JsonReader({
					totalProperty:3,
					root:'results'
					})
				}),
				fields:[
					    {name:'id'},
					    {name:'username'},
					    {name:'password'}
					],
				listeners:{
					load:function(){
						alert(store.getCount());
					}
				}
			});  

整体页面:

<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			//创建数据集对象
			var store=new Ext.data.Store({
				autoLoad:true,
				proxy:new Ext.data.HttpProxy({
					url:"testAction.do",
					method:"POST",
					reader:new Ext.data.JsonReader({
					totalProperty:3,
					root:'results'
					})
				}),
				fields:[
					    {name:'id'},
					    {name:'username'},
					    {name:'password'}
					],
				listeners:{
					load:function(){
						alert(store.getCount());
					}
				}
			});  

			//使用静态数据创建表格
			//var data=[[1,'mary','36987'],
                //[2,'tom','123569'],
				//[3,'jack','36985'],
				//[4,'车间质检','CJZJ']];
			//var store= new Ext.data.SimpleStore({data:data,fields:["id","username","password"]});

			//创建显示表格面板
			var grid=new Ext.grid.GridPanel({
				title:"人员列表",
				renderTo:"grid-div",
				width:550,
				height:200,
				store:store,
				//frame:true,
				columns:[
					{header:"用户号",dataIndex:"id"},
					{header:"姓名",dataIndex:"username"},
					{header:"密码123",dataIndex:"password"}
				]
			});
		});
	</script>
  </head>

  <body>
    <div id="grid-div" align="center"></div>
  </body>

请求方式:http://localhost:8080/zb/test.jsp,页面中将请求testAction.do,请求TestAction中的excute方法,然后将获得的数据转换为json数据传递到Extjs页面,Extjs页面进行解析展示;

在这里只为大家简单的介绍了一下Action和Extjs交互,Extjs中还有很多值得我们去学习的地方,一个简单的实例出来了,其他的得需要灵活去运用了,我也是刚刚接触,所以想写这个文章做个笔记,以后学习到关于Extjs新的知识点还是会写出来和大家交流分享的,请牛人多多指教才是!!

extjs4.2.1与三大框架集成

时间: 2024-10-12 21:56:34

extjs4.2.1与三大框架集成的相关文章

初始化三大框架集成的项目时出现的StringUtils问题

今天整合三大框架时出现的一个问题 java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils at com.opensymphony.xwork2.config.providers.XmlConfigurationProvider.register(XmlConfigurationProvider.java:211) at org.apache.struts2.config.StrutsXmlConfiguration

Struts2+Spring+Hibernate 三大框架的合并集成

这次来看看Struts2+Spring+Hibernate三大框架的整合应用,主要是Spring和Hibernate框架的整合,因为前边已经将Strtus2+Spring整合过了基本一样.  首先看一下分工吧: Struts2做的MVC的流程框架,主要完成从客户端访问到选择action的过程,其中过滤器起到了Controller的作用,action属于model,而jsp则是view页面的展示. Spring主要利用Ioc的特长来管理各种对象:action,service,dao,数据访问源,H

JAVA三大框架SSH的各自作用

一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是基于使用JavaBean属性的Inversion of Control容器.然而,这仅仅是完整图景中的一部分:Spring在使用IoC容器作为构建完关注所有架构层的完整解决方案方面是独一无二的. Spring提供了唯一的数据访问抽象,包括简单和有效率的JDBC框架,极大的改进了效率并且减少了可能的错

[转]JAVA三大框架SSH和MVC理解

Java—SSH(MVC) JAVA三大框架的各自作用 hibernate是底层基于jdbc的orm(对象关系映射)持久化框架,即:表与类的映射,字段与属性的映射,记录与对象的映射 数据库模型 也就是Model; struts提供的丰富标签是用于显示层View;同时struts也充当了实现Control的功能(不管是Struts1,还是Struts2),接收参数,视图分发. Spring是用于降低层与层间耦合度的,就是所有的类都可以由spring统一创建,用时只需注入即可(IOC) 从功能上来说

SSH三大框架的整合

SSH三个框架的知识点 一.Hibernate框架 1. Hibernate的核心配置文件 1.1 数据库信息.连接池配置 1.2 Hibernate信息 1.3 映射配置 1.4 Hibernate核心配置文件 如果单纯使用Hibernate框架,核心配置文件名称hibernate.cfg.xml并且一定要放在src下面,而hibernate和spring整合的时候,hibernate核心配置文件名称和位置没有固定要求的(因为到时候会有一个参数指定其位置). 2. Hibernate映射配置文

Struts,spring,hibernate三大框架的面试

Struts,spring,hibernate三大框架的面试 1.Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Session 4.创建事务Transation 5.持久化操作 6.提交事务 7.关闭Session 8.关闭SesstionFactory  为什么要用: 1. 对JDBC访问数据库的代码做了封装,大大简化了数据访问层繁琐的重复性代码. 2. Hibernate是一个基于JDBC的主流持久

转 :手动配置三大框架整合:Spring+Struts2+mybatis

现在主流的项目框架中,数据库持久层有可能不是hibernate,而是mybatis或者ibatis,其实它们都是一样的,下面我来把环境搭建一下: [导入相关jar包]新建web项目工程mss,Spring+Struts2+mybatis整合,除了Spring和Struts的jar包外(可以在我的资源中下载),我们还需导入mybatis的几个想jar包: 三大框架整合后jar包: [配置web.xml] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

浅谈Java三大框架与应用

前言:对于一个程序员来说,尤其是在java web端开发的程序员,三大框架:Struts+Hibernate+Spring是必须要掌握熟透的,因此,下面谈谈java三大框架的基本概念和原理. JAVA三大框架 一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是基于使用JavaBean属性的Inversion of Control容器.然而,这仅仅是

JAVA三大框架的各自作用

http://christhb.blog.163.com/blog/static/98982492011727114936239/ 一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是基于使用JavaBean属性的Inversion of Control容器.然而,这仅仅是完整图景中的一部分:Spring在使用IoC容器作为构建完关注所有架构层的完整