Ext JS Grid数据分页加载

    Ext JS的Grid通过PagingToolbar和datastore的配合完成对于列表显示的的控制，下面的例子中是实验的JavaScript代码：

Ext.onReady(function() {
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	var store = new Ext.data.JsonStore({
				autoLoad : {
					params : {
						start : 0,
						limit : 4
					}
				},
				root : 'jsonObject',
				totalProperty : 'totalCount',
				idProperty : 'id',
				remoteSort : true,
				fields : ['id', 'text', 'cls'],
				url : 'gridAction.action'
			});
	// store.load();

	var jsongrid = new Ext.grid.GridPanel({
				store : store,
				columns : [{
							id : 'id',
							header : 'id',
							width : 160,
							sortable : true,
							dataIndex : 'id'
						}, {
							header : 'text',
							width : 75,
							sortable : true,
							dataIndex : 'text'
						}],
				listeners : {
					'headerclick' : function(thisgrid, conlumeIndex) {
						var o = {};
						o['conlumeHeader'] = thisgrid.getColumnModel().getColumnHeader(conlumeIndex);
						this.store.baseParams = o;
					}
				},
				stripeRows : true,
				height : 500,
				width : 600,
				title : 'Json Grid',
				// config options for stateful behavior
				stateful : true,
				renderTo : 'griddiv',
				stateId : 'jsongrid',
				bbar : new Ext.PagingToolbar({
							store : store, // grid and PagingToolbar
							// using
							// same store
							displayInfo : true,
							pageSize : 4,
							prependButtons : true,
							items : ['页数'],
							doLoad : function(start) {
								record_start = start;
								var o = {};
								pn = this.getParams();
								o[pn.start] = start;
								o[pn.limit] = this.pageSize;
								this.store.load({
											params : o
										});
							}
						})
			});
});

 

后端和这个JavaScript配合的Action为：

package com.struts2.action;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import net.sf.json.JSONArray;

public class GridAction  {

	   private List<Menu> menus;
	    JSONArray jsonObject;
	    private Integer totalCount;
	    private Integer start = 0;
	    private Integer limit = 4;
	    private String conlumeHeader;

	    public String execute() {


	        menus = new ArrayList<Menu>();

	        Menu benz = new Menu();
	        benz.setText("Benz");
	        benz.setCls("folder");
	        benz.setLeaf(false);
	        benz.setId(10);
	        benz.setDate(new Date());
	        menus.add(benz);


	        Menu menu;
	        menu = new Menu();
	        menu.setText("S600");
	        menu.setCls("file");
	        menu.setLeaf(true);
	        menu.setId(11);
	        menus.add(menu);

	        menu = new Menu();
	        menu.setText("SLK200");
	        menu.setCls("file");
	        menu.setLeaf(true);
	        menu.setId(12);
	        menus.add(menu);

	        Menu bmw = new Menu();
	        bmw.setText("BMW");
	        bmw.setCls("folder");
	        bmw.setLeaf(false);
	        bmw.setId(20);
	        menus.add(bmw);


	        menu = new Menu();
	        menu.setText("325i");
	        menu.setCls("file");
	        menu.setLeaf(true);
	        menu.setId(21);
	        menus.add(menu);

	        menu = new Menu();
	        menu.setText("X5");
	        menu.setCls("file");
	        menu.setLeaf(true);
	        menu.setId(22);
	        menus.add(menu);

	        this.totalCount = menus.size();
	        Integer end = this.start+this.limit;

	        if(this.start+this.limit > this.totalCount)
	        {
	        	end = this.totalCount;
	        }

	        jsonObject = JSONArray.fromObject(menus.subList(this.start, end));
	        try {
	            jsonObject.toString();
	        } catch (Exception e) {
	        }



	        return "success";
	    }

		public JSONArray getJsonObject() {
			return jsonObject;
		}

		public void setJsonObject(JSONArray jsonObject) {
			this.jsonObject = jsonObject;
		}

		public Integer getTotalCount() {
			return totalCount;
		}

		public void setTotalCount(Integer totalCount) {
			this.totalCount = totalCount;
		}

		public Integer getStart() {
			return start;
		}

		public void setStart(Integer start) {
			this.start = start;
		}

		public Integer getLimit() {
			return limit;
		}

		public void setLimit(Integer limit) {
			this.limit = limit;
		}

		public String getConlumeHeader() {
			return conlumeHeader;
		}

		public void setConlumeHeader(String conlumeHeader) {
			this.conlumeHeader = conlumeHeader;
		}

}

 action的发布，通过在struts.xml中配置返回为json的数据类型：

	<package name="jsonstore" extends="json-default" >
		<action name="gridAction" class="com.struts2.action.GridAction">
			<result name="success" type="json">
				<param name="excludeNullProperties">true</param>
				<param name="noCache">true</param>
			</result>
		</action>
	</package>