Ext.define('tools.PageComponent', {extend : 'Ext.Container',requires : [],config : {params : null,itemTpl : null,//list的itemTplemptyText : "没有内容",title : null,//标题currentPage : 1,//当前页（不用配置）pageCount : null,//总共多少页（不用配置）countPerPage : 10,//每一页显示多少条数据storeName : null,//store的全名//ajax请求需要的参数url : null,method : null,xmlns : null,//当前页码的变量名pageIndexName : 'pageIndex',//每页显示条数的变量名pageSizeName : 'pageSize',resultMsgName : 'resultMsg',totolName : 'total',//每块数据的块头的名字dataContainerName : null,layout : 'fit',items : [{xtype : 'toolbar',docked : 'top',items : [{xtype : 'button',iconCls : 'arrow_left',handler : function(button) {system.backView();}}, {xtype : 'button',iconCls : 'refresh',right : 0,top : 5,handler : function(button) {var me = button.getParent().getParent();me.refreshFn();}}]}, {xtype : 'list',itemId : 'list',loadingText : false/*,listeners : {itemtap : function( list, index, target, record, e, eOpts ){
alert('test');var me = this.getParent();me.fireEvent('itemsingletap', list, index, target, record, e, eOpts );}}*/}, {xtype : 'toolbar',itemId : "toolbar",docked : 'bottom',hidden : true,items : [{xtype : 'button',itemId : 'prevBtn',iconCls : 'arrow_left',handler : function(button) {var me = this.getParent().getParent();me.prevPageFn();}}, {xtype : 'button',itemId : 'pageBtn',text : '1/1'}, {xtype : 'button',itemId : 'nextBtn',iconCls : 'arrow_right',handler : function(button) {var me = this.getParent().getParent();me.nextPageFn();}}]}]},initialize : function() {this.callParent();var list = this.down("#list");list.setEmptyText(this.getEmptyText());list.setItemTpl(this.getItemTpl());list.setStore(Ext.create(this.getStoreName()));//讲list的主要事件抛出去给当前类去实现list.on('itemtap', this.itemtap);list.on('itemdoubletap', this.itemdoubletap);list.on('itemsingletap', this.itemsingletap);list.on('itemswipe', this.itemswipe);list.on('itemtaphold', this.itemtaphold);list.on('itemtouchend', this.itemtouchend);list.on('itemtouchmove', this.itemtouchmove);list.on('itemtouchstart', this.itemtouchstart);this.refreshFn();},pagingFn : function() {var params = this.getParams();var me = this;var xmlStr = util.createArrayXmlStr(params);var pageIndexName = this.getPageIndexName();var pageSizeName = this.getPageSizeName();var len = params.length;var str = '';for(var x=0;x<len;x++) {str += params[x] + ',';}var soapStr = this.getMethod() +","+ this.getXmlns() +","+ str + pageIndexName +","+ this.getCurrentPage() +","+ pageSizeName +","+ this.getCountPerPage();var xmlData = system.setXmlParameterSoapByStr(soapStr);//自定义框架的拼接xml报文方法
console.log(xmlData);Ext.Ajax.request({url : me.getUrl(),xmlData : xmlData,scope : me,success : me.successFnOfPaging});},successFnOfPaging : function(result) {var str = $.parseXML($(result.responseText).children().text());var me = this;
console.log(str);if($(str).find(me.getDataContainerName()).text()) {this.setPageCount(Math.ceil($(str).find(me.getTotolName()).text()[0] / (this.getCountPerPage())));//$(str).find(me.getTotolName()).text()[0]不取0的话会将所有的值串起来me.down("#list").getStore().setData(this.strToData(str));//为list设置storethis.applyPageNum();//设置当前页/总页this.changeBtnStatus();//改变工具栏的显示或隐藏this.setPageCount(null);} else if($(str).find(me.getResultMsgName()).text()){//有resultMsgalert($(str).find(me.getResultMsgName()).text());return;} else {alert("没有数据");}},strToData : function(str) {var me = this;var data = [];$(str).find(me.getDataContainerName()).each(function(index) {var fields = me.down("#list").getStore().getFields();var len = fields.length;data[index] = {};for(var x=0;x<len;x++) {//自动装配xml的数据到store的data中var str = 'data['+index+'].' + fields[x] + ' = $(this).find("' + fields[x] + '").text()';eval(str);}});var toolbar = me.down("#toolbar");if (this.getPageCount() > 1) {toolbar.show();} else {toolbar.hide();}return data;},//上一页prevPageFn : function() {this.setCurrentPage(this.getCurrentPage() - 1);this.pagingFn();},//下一页nextPageFn : function() {this.setCurrentPage(this.getCurrentPage() + 1);this.pagingFn();},applyPageNum : function() {var pageBtn = this.down("#pageBtn");pageBtn.setText(this.getCurrentPage() + '/' + this.getPageCount());},changeBtnStatus : function() {var prevBtn = this.down("#prevBtn");var nextBtn = this.down("#nextBtn");if (this.getCurrentPage() == 1) {prevBtn.disable();} else {prevBtn.enable();}if (this.getCurrentPage() == this.getPageCount()) {nextBtn.disable();} else {nextBtn.enable();}},refreshFn : function() {this.setCurrentPage(1);this.pagingFn();},//list的主要事件itemdoubletap : function(list, index, target, record, e, eOpts) {},itemsingletap : function(list, index, target, record, e, eOpts) {},itemswipe : function(list, index, target, record, e, eOpts) {},itemtap : function(list, index, target, record, e, eOpts) {},itemtaphold : function(list, index, target, record, e, eOpts) {},itemtouchend : function(list, index, target, record, e, eOpts) {},itemtouchmove : function(list, index, target, record, e, eOpts) {},itemtouchstart : function(list, index, target, record, e, eOpts) {}
});

使用方法，这里比较特殊，以往都是直接使用，这个组件需要子类继承配置使用，使用的时候定义一个这个类的子类。然后根据需要配置相应的值。然后重写需要的list点击事件的方法；

比如。这里定义了一个PageListView:

Ext.define('EmergencyDrill.view.pagelist.PageListView', {extend : 'tools.PageComponent',xtype : 'pagelistview',alternateClassName : 'pagelistview',requires : [],config : {pageComponentId : 'yjylpage',params : ['userId', localStorage.username, 'flowName', 'EmergencyDrillProcess'],itemTpl : '<div><span>{title}</span></br><span>{completeTimeLimit}</span></br><span>{taskDisplayName}</span></br><span>{taskOwner}</span>' +'<tpl if="sheetStatus == 0"><span>未阅知</span><tpl else><span>已阅知</span></tpl></div>',emptyText : "没有内容",title : '应急演练列表',currentPage : 1,pageCount : null,dataContainerName : 'worksheet',storeName : 'EmergencyDrill.store.EmergencyPageListStore',url : config.serviceUrl + 'WorkSheetMobile',method : 'showListWorkSheet',xmlns : config.xmlns
//        countPerPage : 10,
//        pageIndexName : 'pageIndex',
//        pageSizeName : 'pageSize',
//        resultMsgName : 'resultMsg',
//        totolName : 'total',},initialize : function() {this.callParent();},itemtap : function(list, index, target, record, e, eOpts) {system.param = {//自定义框架跳转页面是参数传递sheetId : record.get('sheetId')};system.pushView('detailview');//自定义框架跳转页面}
});

这个类中我只覆写了itemtap事件。效果图如下：

页面样式没有调，就将就看吧，这里下面的工具条没有显示出来，因为源码中我设置了需要总的条数要大于每一页显示的条数才会显示出下面的工具条（即上一页，当前页/总页，下一页）;

如果总页数超过1页的话就会有这个工具条：

好了，这就是我的与服务器交互的分页组件；