grid分页

var _jsonReader = new Ext.data.JsonReader( { root : 'list', totalProperty : 'totalCount', id : 'id', successProperty : '@success' }, [ { name : 'stuNum', mapping : 'stuNum' }, { name : 'stuName', mapping : 'stuName' }, { name : 'sex', mapping : 'sex' }, { name : 'email', mapping : 'email' }, { name : 'telephone', mapping : 'telephone' }, { name : 'handphone', mapping : 'handphone' }, { name : 'academy', mapping : 'academy' }, { name : 'major', mapping : 'major' }, { name : 'classes', mapping : 'classes' }]); //构造store,proxy跨域使用ScriptTagProxy，在同一个域里边用HttpProxy var ds = new Ext.data.Store( { proxy : new Ext.data.HttpProxy( { url : 'stu.action' }), // reader : _jsonReader }); ds.setDefaultSort('stuNum', 'asc'); // ColumnModels var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), { id : 'stuNum', header : '学号', dataIndex : 'stuNum', sortable : true, width : 20 }, { header : "姓名", dataIndex : 'stuName', width : 20, sortable : true, locked : false }, { header : "姓别", dataIndex : 'sex', width :20 }, { header : "email", dataIndex : 'email', width :20 }, { header : "电话", dataIndex : 'telephone', width :20 }, { header : "手机", dataIndex : 'handphone', width :20 }, { header : "学院", dataIndex : 'academy', width :20 }, { header : "专业", dataIndex : 'major', width :20 }, { header : "班级", dataIndex : 'classes', width :20 }]); //排序 cm.defaultSortable = true; //创建grid var grid = new Ext.grid.GridPanel( { // var grid = new Ext.grid.EditorGridPanel( { collapsible : true,// 是否可以展开 animCollapse : false,// 展开时是否有动画效果 clicksToEdit : 4, title : '学生管理', iconCls : 'icon-grid', //图标‰ store : ds, //数据源 cm : cm, //模板 renderTo : 'query', //加载到div的id viewConfig : { forceFit : true, enableRowBody:true, showPreview:true }, /* * 添加内陷的按钮 buttons : [ { text : '保存' }, { text : '取消' }], * buttonAlign : 'center',// 按钮对齐 * 在顶部的分页工具栏tbar: */ // 分页工具栏在底部的分页工具栏 bbar : new Ext.PagingToolbar( { pageSize : 20, store : ds, displayInfo : true, displayMsg : '显示 {0}-{1}条 / 共 {2} 条', emptyMsg : "无数据", items : ['-', { pressed : true, enableToggle : true, text : '无效', cls : 'x-btn-text-icon details', toggleHandler : ptb_bt1 }] }), // 添加内陷的工具条 tbar : [ { id : 'New1', text : '新建', tooltip : '新建一个表单', iconCls : 'add', handler : function() { ptb_bt1(); } }, '-', { text : '修改', tooltip : '修改', iconCls : 'edit', handler : function() { ptb_bt2(); } }, '-', { text : '删除', tooltip : '删除被选择的内容', iconCls : 'remove', handler : function() { ptb_bt3(); } }], width : 700, height : 485, frame : true, loadMask : true,// 载入遮罩动画 autoShow : true }); grid.render(); ds.load( { params : { start : 0, limit : 20, forumId : 4 } }); grid.on("rowdblclick", function(grid) { loadFormData(grid); });

 

pageSize：每页显示的记录数，默认是20。
    store：这个和grid里边的store参数是一样的，因为分页也需要和数据打交道，所以需要这个参数。
    displayMsg：显示的分页状态信息，例如“第{0}-第{1}条，一共{2}条"，注意一定要有大括号括起来的0，1，2，分别代表当前页的开始，结束，还有全部的记录数，其它的字自己随便写吧，只要读起来通顺就可以了，该信息会显示在分页工具栏的右侧。
    displayInfo：是否显示displayMsg，默认是不显示。
    emptyMsg：没有记录时显示的文本。
    items：要在工具栏上显示的项，我们在构造之后再来看一下都可以有哪些项。

  root：包含数据行集合的属性名字。
    totalProperty：表示数据集中全部记录数的属性名字，只有在分页的时候才需要。
    idProperty：数据行中用来作为标识的属性的名字。
    remoteSort：排序的时候是否通过proxy获得新的数据，默认是false。
    fields：上一个系列里边提到过。这里多了一个mapping，它是将数据里边的名字映射成封装后的Record字段的名字，名字相同的时候，可以忽略。
    proxy：数据的来源。在这里，我们只需要知道我们的数据是从url指明的地址获得的，因为这个地址是跨域的，所以使用ScriptTagProxy。