Ext中对于多种store数据分页实现示例

[size=medium]大家都知道，对于很多Web项目都要实现数据分页功能，在Ext项目中分页也是应用比较广泛的，对于分页的实现，如果处理的好，还是没什么大问题，但对于Ext新手来说，实现还是有点难度的，因为自己曾在分页上遇到过不少麻烦，今天就写一个比较完整的Ext分页示例，一方面算是对自己的总结，另一方面希望能给别人一点启发。

1.首先要新建一个Web项目，把ext库文件放到项目下
2.在WebRoot下面新建一个ext_paging.html页面，由于页面内容太长，在这里只把重要代码分析下，后面会把源码附上[/size]

<!--  ext式样库 -->
		<link type="text/css" rel="stylesheet"
			href="ext/resources/css/ext-all.css">
		<!--  ext基础类库 -->
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext/ext-all-debug.js"></script>

[size=medium]使用Ext至少把这3个基本文件引进来[/size]

//创建Grid表格组件
			purchase_grid = new Ext.grid.GridPanel({
				title:"用户信息",
				renderTo : 'grid-div',
				frame : true,
				bbar : pagebar,
				loadMask: true,//是否显示正在加载
				store : store,
				height : 380,
				width : 1000,
				stripeRows : true,
				autoScroll : true,
				viewConfig : {autoFill : true},
				sm : cb,
				cm: colM,  //列模型
		});

[size=medium]这是一个表格对象,store就是存储数据的东西，实现如下：[/size]

//Store数据存储器 
		store = new Ext.data.Store({
			//采用DWR代理
			proxy : new Ext.data.DWRProxy(UserinfoUtil.getAllUsers,true),
			reader : new Ext.data.ListRangeReader({
						totalProperty: 'totalSize',
						root : 'data',
						id: 'id'
						},recordType),
			remoteSort: true
		});
		store.load({
			params:{
				start:0, 
				limit:2
				}
			});

[size=medium]store里面关键的东东就是这个proxy(代理)，Ext中代理有好几种，这里采用dwr代理，即我请求这个页面，就会到UserinfoUtil对象里面去取数据了，下面的store.load做分页用，其实分页用户看到的就是表格对象中的bbar(分页栏)起作用了，pagbar实现如下[/size]

//分页工具栏
		pagebar = new Ext.PagingToolbar({
			store : store,
			pageSize : 2 ,//每页显示的条数
			displayInfo : true,
			displayMsg : '第 {0} ~ {1} 条 共 {2} 条',
			emptyMsg : '当前没有记录'
		}); 

[size=medium]页面代码写好后，效果如图：[/size]
[img]http://dl.iteye.com/upload/attachment/296489/994b0b74-355e-33be-abab-7aa6c8150ad9.jpg[/img]

[size=medium] 3.把数据库连接类、pojo类、dao类都写好

4.数据的分页处理类UserinfoUtil，代码如下：[/size]

/**
 * 用户数据处理
 * 
 */
public class UserinfoUtil {
	private UserinfoDao ud = new UserinfoDao();

	/**
	 * 从数据库中查询所有用户对象
	 * 
	 * @param conditions:页面传过来的分页值
	 * @return
	 */
	public ListRange getAllUsers(Map conditions) {
		int start = 0, pageSize = 0;
		try {
			start = Integer.parseInt(conditions.get("start").toString());
			pageSize = Integer.parseInt(conditions.get("limit").toString());
			System.out.println("start: " + start + "   pageSize: " + pageSize);
		} catch (Exception ec) {
			ec.printStackTrace();
		}
		// 调用Dao类中的方法，查询所有的产品
		List<Userinfo> list = ud.getAllUsers();
		System.out.println("共有用户：" + list.size());
		// 得到总数据条数
		int totalNum = list.size();
		// 得到最后一页要显示的数据条数
		int endNum = totalNum % pageSize;
		// 能够整数页显示的页数
		int t = totalNum / pageSize;
		// 如果总条数小于每页要显示的条数
		if (totalNum <= pageSize) {
			pageSize = totalNum;
		}
		// 如果总条数不能被每页条数整除，最后一页的显示条数是endNum
		if (endNum != 0 && start + pageSize > t * pageSize) {
			pageSize = endNum;
		}
		List<Userinfo> n_list = list.subList(start, start + pageSize);
		// ListRange实现将数据显示到页面
		ListRange listrange = new ListRange(n_list.toArray(), list.size());
		return listrange;
	}
}

[size=medium]因为页面中的store代理用的是dwr代理，通过dwr将UserinfoUtil类转换成了js对象，所以在页面中还要引入dwr的相关文件[/size]

<!--  dwr核心类库 -->
		<script type='text/javascript' src='dwr/engine.js'></script>
		<script type='text/javascript' src='dwr/util.js'></script>
		<!--引入 dwr proxy-->
		<script type="text/javascript" src="js/dwrproxy.js"></script>
		<!-- 用户信息 -->
		<script type='text/javascript' src='dwr/interface/UserinfoUtil.js'></script>

[size=medium]那么到此，只要在地址栏请求页面ext_paging.html，表格里面的数据就实现了分页，不过不要高兴的太早，大家看上面还有一个查询功能，我要把查询到的数据也显示到表格中，而查询的过程是一个同步的过程，不能采用dwr来实现了，下面采用store的一般代理来实现

5.查询模块的处理，下面是点击按钮后的函数处理[/size]

//查询按钮事件
			function submitMsg(){
				searchForm.form.submit({
					clientValidation:true,//进行客户端验证
					waitMsg:'正在进行查询，请稍候...',//提示信息
					waitTitle:'提示',
					url:'SelectServlet',
					method:'POST',
					success:function(form,action){//加载成功处理函数
						//给store去解析
						store=new Ext.data.Store({
								url:"PagingServlet",
								reader:new Ext.data.JsonReader({
										totalProperty:"totalSize",
										root:"data",
										id:"id"},recordType),
								remoteSort: true
						});
						store.load({
								params:{
									start:0, 
									limit:2
								}
						});
			//刷新分页工具栏pagebar
			[color=red]pagebar.bind(store);[/color]					//将store里面的数据提交
						store.commitChanges();
						//表格重新加载
						purchase_grid.reconfigure(store,colM);
					},
					failure:function(form,action){//加载失败处理函数
						Ext.Msg.alert('提示','查询失败');
					}
				});
			}

[size=medium]注意那行红色代码:pagebar.bind(store);，是将新的store绑定给分页工具栏，这样翻动下一页才显示的是当前store的数据，其实对于不同store数据的分页显示就是这行代码起的作用

6.查询功能后台的实现，为了简单我都采用的是servlet实现[/size]

public class SelectServlet extends HttpServlet {
	private static List<Userinfo> ulist;

	/**
	 * 根据选择查询用户信息的servlet
	 */
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("根据选择查询用户信息的servlet");
		response.setContentType("text/json;charset=GBK");
		PrintWriter out = response.getWriter();
		// 得到选择的职业ID
		int ptype_id = Integer.parseInt(request.getParameter("id"));
		System.out.println("用户选择的是：" + ptype_id);
		// 根据ID来查询所属用户
		UserinfoDao ud = new UserinfoDao();
		ulist = ud.getByPtypeId(ptype_id);
		if (ulist == null) {
			response.getWriter().write("{success:false}");
		} else {
			response.getWriter().write("{success:true}");
		}
		out.flush();
		out.close();
	}

	public static List<Userinfo> getUserinfos() {
		return ulist;
	}

即根据用户选择进行查询

/**
	 * 将查询到的用户数据分页
	 */
	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("用户数据分页的servlet");
		response.setContentType("text/json;charset=GBK");
		PrintWriter out = response.getWriter();
		// 得到要分页的数据
		List<Userinfo> ulist = SelectServlet.getUserinfos();
		int start = Integer.parseInt(request.getParameter("start"));
		int limit = Integer.parseInt(request.getParameter("limit"));
		System.out.println("start:" + start + " limit:" + limit + " list size:"
				+ ulist.size());
		// 将start和limit放到一个Map中
		Map map = new HashMap();
		map.put("start", start);
		map.put("limit", limit);
		// 对数据进行分页处理
		ListRange range = UserinfoUtil.getUsersById(map, ulist);
		// 把ListRange转换成json格式的数据
		String json = DataFormatTransform.getJsonFromBean(range);
		response.getWriter().write(json);
		out.flush();
		out.close();
	}

再将数据分页

[size=medium]查询分页的实现是把数据都转换成了json格式的了，通过页面的Ext中的JsonReader对象去读取

这样两种类型的分页基本就实现了，文章里面省去了很多代码，如果大家看不懂也不要紧，为了真正的帮助到大家，源码及数据库都在下面，可以慢慢领会[/size]