extjs4 分页

来源：互联网发布：游于是乎始得乎编辑：程序博客网时间：2024/05/16 19:50

最近在研究extjs4，前端的框架还有mvc模式，也是面向对象。下面是一个分页的例子

先来看看效果图吧：

jsp页面头部先引入extjs，再加一个div

<link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css"><script type="text/javascript" src="extjs/ext-all-debug.js"></script><script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script><script type="text/javascript" src="test7.js"></script></head><body><div id="ExtComponent"></div></body>

然后就是核心代码test7.js

Ext.require(['Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*']);Ext.onReady(function() {Ext.define('myModel', {extend : 'Ext.data.Model',fields : ['id', 'firstname', 'lastname'],idProperty : 'id'});var storeyang = Ext.create('Ext.data.Store', {pageSize : 10,model : 'myModel',autoLoad : true,proxy : {type : 'ajax', // 采用ajax异步提交url : 'http://localhost:8080/b_springmvc_extjs/loadDatas.do', // 提交的urlactionMethods : {read : 'POST' // 提交的方式是 POST方式},reader : {type : 'json', // 读到的数据格式是json格式root : 'resultList', // 数据的根名是 resultListtotalProperty : 'totalCount' // 总记录数的根名是// totalCount}}});var grid = Ext.create('Ext.grid.Panel', {store : storeyang,title : 'grid 分页示例',renderTo : 'ExtComponent',width : 600,height : 400,x : 100,y : 100,selModel : Ext.create('Ext.selection.CheckboxModel'), // 字段columns : [{header : 'id',dataIndex : 'id', // 数据索引标识width : 100}, {header : 'firstname',dataIndex : 'firstname',width : 200}, {header : 'lastname',dataIndex : 'lastname',width : 200}],bbar : Ext.create('Ext.PagingToolbar', {store : storeyang, displayInfo : true,displayMsg : '显示记录 {0} - {1} of {2}',emptyMsg : "没有相应的记录"})});});

最后是服务端代码

@RequestMapping(value = "/loadDatas.do")@ResponseBodypublic String loadDatas(@RequestParam(value = "start") int start,@RequestParam(value = "limit") int limit) {System.out.println("start : " + start);System.out.println("limit : " + limit);List<User> list = new ArrayList<User>();for (int i = 1; i <= 100; i++) {User user = new User();user.setId(i);user.setFirstname("aaa-" + i);user.setLastname("bbb-" + i);list.add(user);}StringBuffer showData = new StringBuffer();List<User> list2 = new ArrayList<User>();int end = start + limit;for (int i = start; i < end; i++) {list2.add(list.get(i));}JSONArray jsonArray = JSONArray.fromObject(list2);String json = "{" + "totalCount:" + list.size() + "," + "resultList:"+ jsonArray.toString() + "}";System.out.println(json);try {Thread.sleep(1000 * 1);} catch (InterruptedException e) {e.printStackTrace();}return json;}