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');// ColumnModelsvar 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; //创建gridvar 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的idviewConfig : {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。