extjs4.2.1与三大框架集成

来源：互联网发布：淘宝可以用什么支付编辑：程序博客网时间：2024/05/01 01:04

学习这个东西真的是在做实际项目的时候能够得到很好的体现，就像我现在学习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的页面中头部加上：

下面编写我们的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新的知识点还是会写出来和大家交流分享的，请牛人多多指教才是！！

1 0