ExtJs4分页小例子

阅读更多

今天做了个ExtJS4分页的小例子
直接上代码
这是index.jsp

<%@ page language="java" pageEncoding="utf-8"%> 
<%@ page contentType="text/html; charset=utf-8"%> 

<%
//response.setContentType("text/html; charset=utf-8");
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
	
	
	    
	
	
	
	
 	
 
  	
  
	

		

		

	
  

这是testPage.js

Ext.onReady(function() {
	var itemsPerPage = 2; // set the number of items you want per page

		var store = Ext.create('Ext.data.Store', {
			id : 'simpsonsStore',
			autoLoad : false,
			fields : [ 'name', 'email', 'phone' ],
			pageSize : itemsPerPage, // items per page
			proxy : {
				type : 'ajax',
				url : 'query2.jsp', // url that will load data with respect to
									// start and limit params
				reader : {
					type : 'json',
					root : 'items',
					totalProperty : 'total'
				}
			}
		});

		// specify segment of data you want to load using params
		store.load( {
			params : {
				start : 0,
				limit : itemsPerPage
			}
		});

		Ext.create('Ext.grid.Panel', {
			title : 'Simpsons',
			store : store,
			columns : [ {
				header : 'Name',
				dataIndex : 'name'
			}, {
				header : 'Email',
				dataIndex : 'email',
				flex : 1
			}, {
				header : 'Phone',
				dataIndex : 'phone'
			} ],
			width : 400,
			height : 200,
			dockedItems : [ {
				xtype : 'pagingtoolbar',
				store : store,
				dock : 'bottom',
				displayInfo : true
			} ],
			renderTo : Ext.getBody()
		});
	});

最后一个是后台查询数据库生成json

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String names[]={"aaa","bbb","ccc","ddd"};//从后台查出来的结果集
	String email[]={"aaaa","bbbb","cccc","dddd"};
	String phone[]={"aaaaa","bbbbb","ccccc","ddddd"};
	int start=Integer.parseInt(request.getParameter("start"));
	int limit=Integer.parseInt(request.getParameter("limit"));
	int count=4;//总条数
	String json="{'total':'4','items':[";
	for(int i = start; i < limit+start&&i

是不是觉得很简单很方便