使用ext-4.2.1 和Struts2 实现 grid

来源：互联网发布：lol淘宝刷点券会封号吗编辑：程序博客网时间：2024/05/17 04:47

前提准备：

1.struts2必备Jar包

2.struts2 Json插件

json-plugin 可以转换action的返回结果为json数据，恰好配合extjs 的store进行数据的交互。

一、Java代码

1.User.java

package com.yalone.test.ext;public class User {private String firstName;private String lastName;private int age;private String email;public String getFirstName() {return firstName;}public void setFirstName(String firstName) {this.firstName = firstName;}public String getLastName() {return lastName;}public void setLastName(String lastName) {this.lastName = lastName;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}}

2.GridTestAction.java

package com.yalone.test.ext;import java.util.ArrayList;import com.opensymphony.xwork2.ActionSupport;public class GridTestAction extends ActionSupport {private static final long serialVersionUID = 1L;private boolean flag;private ArrayList<User> users;private int total;private int start;private int limit;public boolean isFlag() {return flag;}public void setFlag(boolean flag) {this.flag = flag;}public ArrayList<User> getUsers() {return users;}public void setUsers(ArrayList<User> users) {this.users = users;}public int getTotal() {return total;}public void setTotal(int total) {this.total = total;}public int getStart() {return start;}public void setStart(int start) {this.start = start;}public int getLimit() {return limit;}public void setLimit(int limit) {this.limit = limit;}public String grid() {users = new ArrayList<User>();total = 100;for (int i = start + 1 ; i <= start + limit && i<= total; i++) {User user = new User();user.setFirstName("FirstName" + i);user.setLastName("LastName" + i);user.setAge(i);user.setEmail("email" + i);users.add(user);}System.out.println("executed");flag = true;return "JSON";}}

二、配置struts.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC      "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"      "http://struts.apache.org/dtds/struts-2.0.dtd">      <struts><package name="grid" namespace="/" extends="json-default" ><action name="gridTestAction" class="com.yalone.test.ext.GridTestAction" method="grid"><result name="JSON" type="json" /></action></package></struts>

三、JSP代码

1.common/importExtJs.jsp

<link rel="stylesheet" href="<%=request.getContextPath()%>/ext-4.2.1/resources/css/ext-all.css" type="text/css" /><script type="text/javascript" src="<%=request.getContextPath()%>/ext-4.2.1/ext-all.js"></script><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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><jsp:include page="common/importExtJs.jsp" /> <script type="text/javascript" src="js/grid.js"></script><link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css" type="text/css" /><title>GridTest</title></head><body></body></html>

3.main.css

.find{background-image: url(../images/find.png) !important;}

四、JS代码

grid.js

Ext.onReady(function() {Ext.define('User', {     extend: 'Ext.data.Model',     proxy: {         type: 'ajax',         reader: 'json'     },     fields: [         {name: 'firstName',type: 'string'},         {name: 'lastName', type: 'string'},         {name: 'age',    type: 'int'},         {name: 'email',    type: 'string'}     ] });var store = Ext.create('Ext.data.Store',{storeId:'simpsonsStore',model: 'User',              //pageSize:5, //每页显示数据数proxy:{type: 'ajax',url:'gridTestAction', //请求的数据的urlreader:{type:'json',root:'users', //对应action中需要被现实的字段，一般为listsuccessProperty:'flag',totalProperty: 'total'}}});       // 下拉框数据var states = Ext.create('Ext.data.Store', {    fields: ['abbr', 'name'],    data : [        {"abbr":"start", "name":"开始记录"},        {"abbr":"limit", "name":"每页显示"}    ]});               // 下拉框var combo = Ext.create('Ext.form.ComboBox', {    store: states,    queryMode: 'local',    width:100,    displayField: 'name',    valueField: 'abbr',    editable:    false,    emptyText :'选择显示方式',    region : 'west'});var grid = Ext.create('Ext.grid.Panel', {    title: 'UserInfo',    store: store,    dockedItems: [      {          xtype: 'toolbar',          dock: 'top',          items: [combo,         {             xtype    : 'textfield',             name     : 'field',             id   : 'field',             emptyText: '输入值'         },         {     xtype: 'button',     text:  '开始',     iconCls:'find',     handler : function(){        var startNumber = 0;        var limitNumber = 5;        var states = combo.getValue();        var val = Ext.getCmp('field').getValue();                if (states == 'start') {        startNumber = val;    } else if(states == 'limit'){limitNumber = val;    }        store.pageSize = limitNumber;    store.load({    params:{         start: startNumber,         limit: limitNumber    }    }); // 加载请求。。这个必须有，没有不会请求url     }     }       ]      },//下方分页工具条      {      xtype: 'pagingtoolbar',          store: store,          dock: 'bottom',          displayInfo: true      }    ],    columns: [        { text: 'FirstName',  dataIndex: 'firstName', sortable:true},        { text: 'LastName',   dataIndex: 'lastName',  sortable:true},        { text: 'Age',       dataIndex: 'age',       sortable:true},        { text: 'Email',      dataIndex: 'email' ,    sortable:true ,flex: 1 }    ],    columnLines:true,    autoHeight: true,    collapsible:true,    width: 600,    renderTo: Ext.getBody()});});

五、运行效果图

六、工程目录截图