Complete example of using ExtJs to dynamically load a grid _ extjs

How to Implement Dynamic Loading of grid in ExtJs seems to be unknown to many friends. The following is a good example. I hope to help you with the complete Ext3.3 package.

Ext3.3 Chinese Document

The data table structure is: table> record> Field

Store Structure: Ext. data. Store> Ext. data. Record> Ext. datafield

Store first drives DataProxy to load data. After DataProxy is loaded, it will parse the data row and finally obtain the Record object.

1. bean:

The Code is as follows:

Package com. leo. bean;

Public class Person {
Private String name;
Private int age;
Private String sex;
Private String birthday;

Public Person (String name, int age, String sex, String birthday ){
Super ();
This. name = name;
This. age = age;
This. sex = sex;
This. birthday = birthday;
}

Public String getName (){
Return name;
}

Public void setName (String name ){
This. name = name;
}

Public int getAge (){
Return age;
}

Public void setAge (int age ){
This. age = age;
}

Public String getSex (){
Return sex;
}

Public void setSex (String sex ){
This. sex = sex;
}

Public String getBirthday (){
Return birthday;
}

Public void setBirthday (String birthday ){
This. birthday = birthday;
}

}

2. action

The Code is as follows:

Package com. leo. action;

Import java. util. ArrayList;
Import java. util. List;

Import com. leo. bean. Person;
Import com. opensymphony. xwork2.ActionSupport;

Public class ExtjsAction extends ActionSupport {
Private long results;
Private List items;

Public long getResults (){
Return results;
}

Public void setResults (long results ){
This. results = results;
}

Public List getItems (){
Return items;
}

Public void setItems (List items ){
This. items = items;
}

Public String execute () throws Exception {
This. results = 3;
Person p1 = new Person ("Zhang San", 29, "male", "1990-10-22 ");
Person p2 = new Person ("Li Si", 28, "male", "1991-03-30 ");
Person p3 = new Person ("Wang Wu", 27, "female", "1993-08-17 ");
This. items = new ArrayList ();
This. items. add (p1 );
This. items. add (p2 );
This. items. add (p3 );

Return SUCCESS;
}
}

3. struts-xml

The Code is as follows:

Http://struts.apache.org/dtds/struts-2.1.dtd>

4. xml

The Code is as follows:

Struts2
Org. apache. struts2.dispatcher. ng. filter. StrutsPrepareAndExecuteFilter



Struts2
*. Action

5. jsp

The Code is as follows:

<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>



Use ExtJs with Struts2