（转载）使用extjs-4.2.1 和Struts2 实现 grid
前提准备：
1.struts2必备Jar包
2.struts2 Json插件
json-plugin 可以转换action的返回结果为json数据，恰好配合extjs 的store进行数据的交互。
一、Java代码
1.User.java
1 package com.yalone.test.ext; 2 3 public class User { 4 private String firstName; 5 private String lastName; 6 private int age; 7 private String email; 8 9 public String getFirstName() { 10 return firstName; 11 } 12 13 public void setFirstName(String firstName) { 14 this.firstName = firstName; 15 } 16 17 public String getLastName() { 18 return lastName; 19 } 20 21 public void setLastName(String lastName) { 22 this.lastName = lastName; 23 } 24 25 public int getAge() { 26 return age; 27 } 28 29 public void setAge(int age) { 30 this.age = age; 31 } 32 33 public String getEmail() { 34 return email; 35 } 36 37 public void setEmail(String email) { 38 this.email = email; 39 } 40 41 }
2.GridTestAction.java
1 package com.yalone.test.ext; 2 3 import java.util.ArrayList; 4 5 import com.opensymphony.xwork2.ActionSupport; 6 7 public class GridTestAction extends ActionSupport { 8 9 private static final long serialVersionUID = 1L; 10 11 private boolean flag; 12 13 private ArrayList<User> users; 14 15 private int total; 16 17 private int start; 18 19 private int limit; 20 21 public boolean isFlag() { 22 return flag; 23 } 24 25 public void setFlag(boolean flag) { 26 this.flag = flag; 27 } 28 29 public ArrayList<User> getUsers() { 30 return users; 31 } 32 33 public void setUsers(ArrayList<User> users) { 34 this.users = users; 35 } 36 37 public int getTotal() { 38 return total; 39 } 40 41 public void setTotal(int total) { 42 this.total = total; 43 } 44 45 public int getStart() { 46 return start; 47 } 48 49 public void setStart(int start) { 50 this.start = start; 51 } 52 53 public int getLimit() { 54 return limit; 55 } 56 57 public void setLimit(int limit) { 58 this.limit = limit; 59 } 60 61 public String grid() { 62 users = new ArrayList<User>(); 63 total = 100; 64 for (int i = start + 1 ; i <= start + limit && i<= total; i++) { 65 User user = new User(); 66 user.setFirstName("FirstName" + i); 67 user.setLastName("LastName" + i); 68 user.setAge(i); 69 user.setEmail("email" + i); 70 users.add(user); 71 } 72 System.out.println("executed"); 73 flag = true; 74 return "JSON"; 75 } 76 }
二、配置struts.xml
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE struts PUBLIC 3 "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 4 "http://struts.apache.org/dtds/struts-2.0.dtd"> 5 6 <struts> 7 <package name="grid" namespace="/" extends="json-default" > 8 <action name="gridTestAction" class="com.yalone.test.ext.GridTestAction" method="grid"> 9 <result name="JSON" type="json" /> 10 </action> 11 </package> 12 </struts>
三、JSP代码
1.common/importExtJs.jsp
1 <link rel="stylesheet" href="<%=request.getContextPath()%>/ext-4.2.1/resources/css/ext-all.css" type="text/css" /> 2 <script type="text/javascript" src="<%=request.getContextPath()%>/ext-4.2.1/ext-all.js"></script> 3 <script type="text/javascript" src="<%=request.getContextPath()%>/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
注：resources/css/ext-all.css和ext-all.js 为ext4.2.1的必须引入文件locale/ext-lang-zh_CN.js为国际化中文文件
2.grid.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <jsp:include page="common/importExtJs.jsp" /> 8 <script type="text/javascript" src="js/grid.js"></script> 9 <link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css" type="text/css" /> 10 <title>GridTest</title> 11 </head> 12 <body> 13 14 </body> 15 </html>
3.main.css
1 .find{ 2 background-image: url(../images/find.png) !important; 3 }
四、JS代码
grid.js
1 Ext.onReady(function() { 2 3 Ext.define('User', { 4 extend: 'Ext.data.Model', 5 proxy: { 6 type: 'ajax', 7 reader: 'json' 8 }, 9 fields: [ 10 {name: 'firstName',type: 'string'}, 11 {name: 'lastName', type: 'string'}, 12 {name: 'age', type: 'int'}, 13 {name: 'email', type: 'string'} 14 ] 15 }); 16 17 var store = Ext.create('Ext.data.Store',{ 18 storeId:'simpsonsStore', 19 model: 'User', 20 //pageSize:5, //每页显示数据数 21 proxy:{ 22 type: 'ajax', 23 url:'gridTestAction', //请求的数据的url 24 reader:{ 25 type:'json', 26 root:'users', //对应action中需要被现实的字段，一般为list 27 successProperty:'flag', 28 totalProperty: 'total' 29 } 30 } 31 }); 32 33 // 下拉框数据 34 var states = Ext.create('Ext.data.Store', { 35 fields: ['abbr', 'name'], 36 data : [ 37 {"abbr":"start", "name":"开始记录"}, 38 {"abbr":"limit", "name":"每页显示"} 39 ] 40 }); 41 42 // 下拉框 43 var combo = Ext.create('Ext.form.ComboBox', { 44 store: states, 45 queryMode: 'local', 46 width:100, 47 displayField: 'name', 48 valueField: 'abbr', 49 editable: false, 50 emptyText :'选择显示方式', 51 region : 'west' 52 }); 53 54 var grid = Ext.create('Ext.grid.Panel', { 55 title: 'UserInfo', 56 store: store, 57 dockedItems: [ 58 { 59 xtype: 'toolbar', 60 dock: 'top', 61 items: [combo, 62 { 63 xtype : 'textfield', 64 name : 'field', 65 id : 'field', 66 emptyText: '输入值' 67 }, 68 { 69 xtype: 'button', 70 text: '开始', 71 iconCls:'find', 72 handler : function(){ 73 var startNumber = 0; 74 var limitNumber = 5; 75 var states = combo.getValue(); 76 var val = Ext.getCmp('field').getValue(); 77 78 if (states == 'start') { 79 startNumber = val; 80 } else if(states == 'limit'){ 81 limitNumber = val; 82 } 83 store.pageSize = limitNumber; 84 store.load({ 85 params:{ 86 start: startNumber, 87 limit: limitNumber 88 } 89 }); // 加载请求。。这个必须有，没有不会请求url 90 } 91 } 92 ] 93 },//下方分页工具条 94 { 95 xtype: 'pagingtoolbar', 96 store: store, 97 dock: 'bottom', 98 displayInfo: true 99 } 100 ], 101 columns: [ 102 { text: 'FirstName', dataIndex: 'firstName', sortable:true}, 103 { text: 'LastName', dataIndex: 'lastName', sortable:true}, 104 { text: 'Age', dataIndex: 'age', sortable:true}, 105 { text: 'Email', dataIndex: 'email' , sortable:true ,flex: 1 } 106 ], 107 columnLines:true, 108 autoHeight: true, 109 collapsible:true, 110 width: 600, 111 renderTo: Ext.getBody() 112 }); 113 });
