Extjs学习总结之12使用ComboBox实现分页

分页是做web开发必须要会的哦，看看extjs怎么实现分页的，comboBox还记得是什么吗？

看代码吧：

combobox.js

Ext.onReady(function(){
	//使用ComboBox演示分页 
	var proxy = new Ext.data.HttpProxy({
		url:"../../../comboboxServlet"
	});	
	
	var City = Ext.data.Record.create([
		{name:"did",type:"int",mapping:"did"},
		{name:"dname",type:"string",mapping:"dname"}
	]);
	
	var reader = new Ext.data.JsonReader({
		totalProperty:"totalProperty",//总记录数
		root:"root"//所有的数据（json对象数组）
	},City);
	
	var store = new Ext.data.Store({
		proxy:proxy,
		reader:reader
	});
	
	
	var combo = new Ext.form.ComboBox({
		store:store,
		emptyText:"请选择部门",
		mode:"remote",
		pageSize:5,
		triggerAction:"all",
		displayField:"dname",
		valueField:"did",
		renderTo:Ext.getBody(),
		readOnly:true,
		listWidth:300
	
	});
});

然后看看servlet怎么写：

package com.fenet.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class ComboboxServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			PrintWriter out = response.getWriter();
			//起始索引和页大小
			int start = Integer.parseInt(request.getParameter("start"));
			int limit = Integer.parseInt(request.getParameter("limit"));
			
			//总记录数，如果是数据库则通过count计算出来
			int totalProperty = 17;
			
			String fmt = "{did:%d,dname:'%s'}";
			StringBuffer s = new StringBuffer("{totalProperty:");
			s.append(totalProperty).append(",root:[");
			int end = start+limit;
			
			//因为不是查找数据库，所以需要多加一个判断
			if(end > totalProperty)end = totalProperty;//如果是数据库本行也删除
			for(int i=start;i<end;i++){
				s.append(String.format(fmt,i,"部门"+i));
				if(i<end-1){
					s.append(",");//个json对象用逗号隔开，最后一个不要
				}
			}
			s.append("]}");
			out.println(s.toString());
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
	}
}

 

效果非常非不错吧。