Extjs中实现分页

目前接触到的有两种方法，主要区别在后台程序，界面上都是一样的写法，

首先创建数据集dataStore

// Model
Ext.define('data.model.IndexStaff', {
    extend:'Ext.data.Model',
    fields:[
        {name:'id', mapping:'id'},
        {name:'name', mapping:'name'}
       
    ]
   
});
// Proxy
Ext.define('data.proxy.IndexStaff', {
    extend:'Ext.data.proxy.Ajax',
    url:http://localhost:8080/getdata.jsp

    model:'data.model.IndexStaff',
    method:'POST',
    reader:{
        type:'xml',
        record:'data',
        totalRecords:'@total',//获得数据总条数标签
    }
});
// Store
Ext.define('data.store.IndexStaff', {
    extend:'Ext.data.Store',
    pageSize: 30,//设置每页显示数据条数
    model:'data.model.IndexStaff'
});

var gridStore = new data.store.IndexStaff();

首先在创建GridPanel

Ext.create('Data.grid.Panel',{

    extends:"Ext.grid.panel",

    id: 'GridPanel',
    region: 'center',
   trackOver: false,
    store:gridStore, // 数据集 
    stripeRows:true, 
            autoScroll:true,
                     columns: [                     
           //测试用的
             {header: "id", width: 80, dataIndex: 'id'},
             {header:'name', dataIndex:'name', width: 150}

                  ],

//分页栏
               dockedItems:[
                 {xtype:'pagingtoolbar', store:perDataStore, dock:'bottom', displayInfo:true,displayMsg: '显示 {0} - {1} 条，共计 {2} 条',emptyMsg: "没有数据"}
             ]
                         });

       me.callParent(arguments);
    }
});

 

在界面请求数据时会传递limit职位store中的pageSize,和start即grid中分页的页面标号，从0开始。

在后台控制语句中传出需要请求数据的条数，根据start和limit判断，数据总跳数为total如果start*limit+limit小于数据总条数则取数据应从start*limit到start*limit-1取值，如果start*limit+limit大于数据总条数则从start*limit到total之间取值。需要注意的是，后台返回给页面的数据项中需包含<total>total<total>数据项，标签中的total名不是固定的只要和proxy中totalRecords:'@total',@后的标签名一样即可。

 

再说服务器取值，服务器取值最好一次性取得所有数据的条数，并将数据缓存在客户端，这样就不用每次分页时都去服务器取值。

 

以上仅供参考，主要是思路，代码应该需要进一步修改，欢迎大家指正。