extjs4.2.1与三大框架集成

2022-09-30 23:06:00

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

extjs4.2.1与三大框架集成

好了，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成功使用，否则你得好好查查出现的问题：

extjs4.2.1与三大框架集成

给页面动态添加数据：

上面我们的数据是自己定义了一个二维数组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页面进行解析展示；

extjs4.2.1与三大框架集成

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


extjs4.2.1与三大框架集成,布布扣,bubuko.com

extjs4.2.1与三大框架集成

上一篇：CBT云比特挖矿APP开发介绍


下一篇：云比特CBT空投矿池资产APP系统开发