您的位置：首页 > Web前端 > JavaScript

extjs4.2.1与三大框架集成

2014-06-24 20:57 423 查看
学习这个东西真的是在做实际项目的时候能够得到很好的体现，就像我现在学习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新的知识点还是会写出来和大家交流分享的，请牛人多多指教才是！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航