extjs4.2.1 integration with three major frameworks

Learning this thing is really in the actual project when you can get a very good embodiment, as I now learn ExtJS, because the project needs to use ExtJS to do the page, so it began to study it, like before, I do not want to take the initiative to learn ExtJS, Self-motivated learning technology is not very high ah, hehe, now to use it to do the project, have to learn, today built a framework, with struts, spring and ExtJS, why not hibernate, because this project data volume is more, The logic inside the relationship is also more complex, so the project team after discussion without Hibernate, then start to let our ExtJS and struts, spring integration it !!

In fact, integration with the three framework of integration is no different, only the final step will ExtJS related documents copied to our project only;

Struts and spring are integrated, slightly written, in my previous blog:

First, the new Web project, the introduction of struts, spring corresponding jar package;

Second, set up our struts, spring corresponding loading classes and files in Web. xml;

Third, the configuration of our spring.xml (data sources, transactions, etc.) and struts.xml files;

Iv. Add our ext.js, I use the version here is extjs4.2.1, you can download on the official website:

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

Because the downloaded file is larger, because it contains a lot of documents, source code, samples, etc., so when we integrate into the project, these can be used, the following is the file we need to import, you can also go to my library to download integrated version ExtJS:

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

Well, ExtJS has been integrated into our project, let's create a new page test.jsp, using ExtJS need to import a ExtJS style file and JS file: You need to add the header in each page that uses ExtJS:

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

<script type= "Text/javascript" src= "Extjs/ext-all.js" ></script>

Write our JSP page below:

where Ext.onready (function () {}) is ExtJS, and all ExtJS functions are in this portal, we define some static data in the above example, and put it in the table panel. If the ExtJS do not understand the ExtJS in the Internet can be consulted about the relevant functions and help documents, ExtJS very powerful, the inside of a lot of classes, to rely on their own to explore the study;
Deploy our project to the inverted Tomcat server, start Tomcat, and if not error, struts and spring configuration OK, In the Address bar request our test.jsp page, appear the following page, and JS does not error, then ExtJS successful use, otherwise you have to look up the problem:

To add data to a page dynamically:
Above our data is defined by ourselves a two-dimensional array of data, when we actually do the project, the data is transmitted from the background of dynamic data, then how to pass the action to the ExtJS page, the general data we will think of through XML, JSON way, In fact, we can pass both ways to the ExtJS page, below to tell you a way to pass the JSON to the page:
1. Action in the same way as the AJAX request, through Response.getwriter (). write (jsonstring); Send request to page:
Execution method:
Public String Execute () {this.items=new arraylist<person> (); System.out.println ("OK"); Person Person=new person (1, "Jack", "26958"), Items.Add (person);p erson=new person (2, "Mary", "123456"), Items.Add ( person);p The erson=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 is configured because we have integrated spring, so the instantiation of the class is managed by spring, and struts does not need to write a page jump:
<struts><package name= "test" namespace= "/" extends= "Struts-default" ><action name= "TestAction" class= "Testaction" ></action></package></struts>

2, to a fixed page to receive, action in need to jump to a page, the page receives jsonstring:
Execution method:
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);p erson=new person (2, "Mary", "123456"), Items.Add ( person);p The erson=new person (3, "Harderxin", "136984"), Items.Add (person), this.jsonstring = "{totalcount:" +3+ ", Results: "+jsonarray.fromobject (items). toString () +"} "; Return "Success";}
struts.xml configuration, jump to the appropriate page:
<struts><package name= "test" namespace= "/" extends= "common" ><action name= "testaction" class= " Testaction ">   <result name=" Success ">jsondata.jsp</result></action></package>< /struts>

Page only receives jsonstring,jsondata.jsp page:

3, through the action definition attribute directly to the JSON data to the page, need to import Json-lib.jar, the principle is also through the jar package to convert the corresponding class to JSON data
Define the Person class:
Package Com.zb.test.bean;public class Person {private Integer id;private string username;private string Password;public P Erson (Integer ID, string username, string password) {super (); this.id = Id;this.username = Username;this.password = Passwor D;} 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;}}

To write our 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);p erson=new person (2, "Mary", "123456"), Results.add ( person);p The erson=new person (3, "Harderxin", "136984"); Results.add (person); return "Success";}

Define our Struts.xml, at which time our package needs to inherit Json-default, so that we can use JSON in the type of result:
<struts><package name= "test" namespace= "/" extends= "Json-default" ><action name= "testAction" class= " Testaction ">   <result name=" Success "type=" JSON "></result></action></package></ Struts>

The transition to the page is also JSON data, and the Name property of the corresponding field in the page will match the names of the attributes in person;
The above three ways can let our backstage pass the data through the action and ExtJS page interaction, everyone can choose their own configuration, the purpose is the same, the background data into the JSON data to the page, but the conversion is not the same way, the following to see the page:
At this point we get the store DataSet object in the following way:
Create DataSet object 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 ());}});  

Overall page:
Request method: Http://localhost:8080/zb/test.jsp, Page will request testaction.do, request the Excute method in Testaction, and then convert the obtained data to JSON data to the ExtJS page, ExtJS page to parse the display;

Here only for the simple introduction of the action and ExtJS interaction, ExtJS There are many worthy of our learning place, a simple instance came out, the other needs to be flexible to use, I have just contact, so want to write this article to make a note, After learning about ExtJS new knowledge points or will write out and share with you, please cow people more advice is!!