ExtJS笔记---Grid实现后台分页

好记性不如烂笔头，现在每次碰见问题和觉得应该记录下来的东西都会保持写博客的习惯，今后再次碰见这种问题，就不用把时间浪费了。

这段时间用ExtJS用的多一点,前段时间碰见的分页问题，今天做个笔记吧。

为了简单明了，此project使用的是servlet的方式，如果你使用的是struts2或者spring MVC，则相应的改变成对于方式就可以了。

首先在页面引入ext所不要的文件，这个自然不必多说了吧，另外为了整个项目清晰明了，EXTJS代码也最好和JSP页面（当然了，你也有可能使用的模板，同理，这我就不必多说了）分开，那就新建一个app.js，在JSP页面中也需要引入进来.

PS(这里的JSON解析我使用了GSON，可以参考https://code.google.com/p/google-gson/)

下面是app.js的代码：

Ext.onReady(function() {
	var pageSize = 5;
	var proxyData = new Ext.data.HttpProxy({url:'getJson'});
	var render = new Ext.data.JsonReader({root:'data',totalProperty: 'totalCount'},[{  
         name : 'id',  
         type : 'int'
     	},{  
         name : 'name',
         type: 'string' 
     	},{  
         name : 'borth',  
         type : 'date'
     	}]);
    var ds = new Ext.data.Store({
        proxy : proxyData,  
		reader : render
    });
    
    var cm = new Ext.grid.ColumnModel([
         new Ext.grid.RowNumberer(),
        { header: '序号', dataIndex: 'id',width:15 },
        { header: '姓名', dataIndex: 'name',width:30 },
        { header: '生日', dataIndex: 'borth',
        	width:55 ,
        	sortable: true,  
  			renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s') }
    ]);
    cm.defaultSortable = true;
    ds.load({params:{start:0,limit:pageSize}});
    
    var grid = new Ext.grid.GridPanel({
        loadMask : {msg:'正在加载数据,请稍等......'},
        store: ds,
        layout:'fit',
        cm: cm,
        height:300,
        renderTo:Ext.getBody(),
		title:'<center>人员信息</center>',
        viewConfig: {
            forceFit: true
        },
        bbar: new Ext.PagingToolbar({
            pageSize: pageSize,
            store: ds,
            displayInfo: true,
            displayMsg: '当前显示{0} - {1}条，共{2}条数据',
            emptyMsg: "没有记录"
        })
    });
});

这里要注意 ds.load({params:{start:0,limit:pageSize}});
里面两个参数大家应该都知道吧？ 这就是我们分页所需要的数据了,
下面是servlet类，为了节约空间，只贴出doPost方法，详细源文件请下载底部的压缩包

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int start = Integer.valueOf(request.getParameter("start"));
		int limit = Integer.valueOf(request.getParameter("limit"));

		String jsonStr = null;
		Map<String, Object> jsonObj = new HashMap<String, Object>();
		List<Person> persons = new ArrayList<Person>();
		int totalCount = 20;
		for (int i = 1; i <= totalCount; i++) {
			Person p = new Person(i, "路人" + i, new Date());
			persons.add(p);
		}
		persons = persons.subList(start, limit+start);
		jsonObj.put("data", persons);
		jsonObj.put("totalCount", totalCount);
		response.setContentType("application/x-json");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		Gson gson = new Gson();
		jsonStr = gson.toJson(jsonObj);
		out.print(jsonStr);
		out.close();
	}

好了，有兴趣的同学下载压缩包导入Eclipse看吧。

评论

3 楼 xiaoyuyu0206 2014-01-24  

2 楼 lucky16 2012-07-20  

liqj2ee 写道

很显然你这个根本不是后台分页，你的limit也有歧异，你做了一次性读取一定的数据然后再分页。

这只是一个Demo，为了简单，没有写DAO，全部东西就在servlet里面就写出来了，你可以根据获取到的起始记录和最大记录自己写SQL啊

1 楼 liqj2ee 2012-07-12  

很显然你这个根本不是后台分页，你的limit也有歧异，你做了一次性读取一定的数据然后再分页。