Ext+DWR分页的例子(保证能用)

需要dwrproxy.js，下面提供dwrproxy.js下载（我在前人基础修改，非我直接写）

 

http://download.youkuaiyun.com/source/1823711

 

 JAVA实体类：

 

public class ListRange {

 public ListRange(Object[] data, int totalSize) {
  this.data = data;
  this.totalSize = totalSize;
 }

 private Object[] data;

 private int totalSize;

 public Object[] getData() {
  return data;
 }

 public void setData(Object[] data) {
  this.data = data;
 }

 public int getTotalSize() {
  return totalSize;
 }

 public void setTotalSize(int totalSize) {
  this.totalSize = totalSize;
 }

}

 

 

 

 

我的项目是EXT+DWR+HIBERNATE+SPRING

 

DWR直接到SERVICE：

 

public ListRange findEmp(Map params) {
  Date endDate = null;
  int start =(int)params.get("start");
  int pageSize =(int)params.get("limit");

 

------------以上为分页参数，下面是自定义参数-------------------

  String empCode = (String)params.get("empCode ");

 

--------------提供一个计算当前页的方法----------------------

 

 public static int getPageIndex(int start, int pageSize) {
  Double pageIndex = new Double(0);
  pageIndex = Math.floor(start / pageSize) + 1;

  return pageIndex.intValue();

 }

 

 

下面就是JS里的了：

 

var store = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(service.method, true),
        reader: new Ext.data.ListRangeReader({
            totalProperty : 'totalSize',
            root    : 'data',
            id    : 'id'
        }, recored),//recored是你自己建立的
        remoteSort: true,
    });

 

 

store.load({params:{start:0,limit:pageSize}});

 
   store.on('beforeload', function(thisStore,options ) {
      store.baseParams={empCode:empCode};
 });

 

 

------------其他的都一样了，就这么多了，转帖请说明出处，如果真的错误，请大家指正，别把错误转走了----------------

 

 

-----应大家要求，我贴一个完整JS上来，希望有所帮助------

 

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
    var pageSize = 15;
    var img = 'ext/resources/images/btn';
   
    //gird显示字段列，dataIndex对应下面dataRecords里的字段
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({
        header: "编号",//此为创建一个自动增长列，固定用法
        width: 35
    }), {
        header: "姓名",
        dataIndex: "name",
        width: 100
    }, {
        header: "年龄",
        dataIndex: "age",
        width: 100
    }, {
        header: "生日",
        dataIndex: "brithday",
        renderer: Ext.util.Format.dateRenderer('Y年m月d日'),
        width: 55
    }, {
        header: "邮箱",
        dataIndex: "email",
        width: 55
    }]);
   
    //与实体名称相同，支持多级，如：实体里的属性为对象，可以访问此对象的属性
    var dataRecords = Ext.data.Record.create([{
        name: 'name',
        type: 'string'
    }, {
        name: 'age',
        type: 'int'
    }, {
        name: 'brithday',
        type: 'date'
    }, {
        name: 'email',
        type: 'string'
    }]);
   
   
    //此为数据加载，实现GRID分页，EXT+DWR+SPRING耦合
    var store = new Ext.data.Store({
     //ExamService通dwr.xml里名称一致,dataResover为方法
        proxy: new Ext.data.DWRProxy(DataService.dataResover, true),
        reader: new Ext.data.ListRangeReader({
            totalProperty: 'totalSize',
            root: 'data',
            id: 'id'
        //dataRecords为以上定义，其类型为ListRange里面定义的属性
        }, dataRecords),
        remoteSort: true
    });
   
    //此处为自定义参数
    store.on('beforeload', function(thisStore, options){
        var qname = Ext.get('qname').getValue();
        var qbrithday = Ext.get('qbrithday').getValue();
        store.baseParams = {
            name: qname,
            birthday: qbrithday
        };
    });
   
    //定义一个分页工具条,store与grid的store对应
    var pagingBar = pagingBarCreator(pageSize, store);
   
    //定义grid
    var grid = new Ext.grid.GridPanel({
        region: "center",
        store: store,
        cm: cm,
        layout: "fit",
        frame: true,
        loadMask: {
            msg: "数据加载中，请稍等..."
        },
        border: true,
        width: 700,
        autoWidth: true,
        columnLines: true,
        autoScroll: true,
        viewConfig: {
            forceFit: true
        },
        title: '人员信息',
        bbar: pagingBar
    });
   
    //查询的form
    var queryPanel = new Ext.Panel({
        region: "north",
        width: 400,
        height: 120,
        title: '查询',
        collapsible: true,
        layout: 'fit',
        split: true,
        resizable: false,
        iconCls: "center_icon",
        items: [{
            xtype: "form",
            height: 80,
            labelPad: 0,// 标签与字段录入框之间的空白
            bodyStyle: 'padding:8px 0px 0px 20px',
            frame: true,
            labelAlign: 'right',
            labelWidth: 55,
            items: [{
                layout: 'column',
                items: [{
                    columnWidth: .5,
                    layout: 'form',
                    items: [textfieldCreator('qname', '姓名', '80%', 200, true)]
                }, {
                    columnWidth: .5,
                    layout: 'form',
                    items: [datefieldCreator('qbrithday', '生日', '80%', 200, true)]
                }]
            }]
        }],
        buttons: [{
            text: '查询',
            cls: 'x-btn-text-icon details',
            icon: img + "/filterIcon.png",
            handler: function(){
                store.load({
                 //分页参数
                    params: {
                        start: 0,
                        limit: pageSize
                    }
                });
                grid.getView().refresh();
            }
        }]
    });
   
    function pagingBarCreator(pageSize,store){
  var pagingBar = new Ext.PagingToolbar({
             pageSize  : pageSize,
             store   : store,
             displayInfo  : true,
             displayMsg  : '第 {0}  ~ {1} 条 , 共 {2} 条 ',
             emptyMsg  : '无任何记录',
             beforePageText : '第',
             afterPageText : '页'
         });
     return pagingBar;
 }
 
 function textfieldCreator(id,labeltext,anchor,leng,allow){
  var textfield = new Ext.form.TextField({
       fieldLabel: labeltext,
       id:id,
             anchor:anchor,
             maxLength:leng,
             allowBlank:allow
  });
  return textfield;
 }
 
 function datefieldCreator(id,labeltext,anchor){
  var datefield = new Ext.form.DateField({
       fieldLabel: labeltext,
       id: id,
       anchor:anchor,
       format: 'Y-m-d'
  });
  return datefield;
 }
   
    var viewPort = new Ext.Viewport({
        title: "成绩查询",
        layout: 'border',
        id: "viewPort",//DIV的ID，显示位置
        items: [queryPanel, grid],
        renderTo: 'view'
    });
   
    store.load({//分页参数
    params: {start: 0,limit: pageSize}});
});