標籤：des style class blog code java
學習這個東西真的是在做實際項目的時候能夠得到很好的體現，就像我現在學習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>
執行方法：
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>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="struts-taglib" %> <s:property value="jsonString" escape="false" />
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;}}
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><package name="test" namespace="/" extends="json-default"><action name="testAction" class="testAction"> <result name="success" type="json"></result></action></package></struts>
上面的三種方式都可以讓我們的後台傳遞過來的資料通過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新的知識點還是會寫出來和大家交流分享的，請牛人多多指教才是！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
