2019獨角獸企業重金招聘Python工程師標準>>>

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頁的話就會有這個工具條：

好了，這就是我的與服務器交互的分頁組件；

轉載于:https://my.oschina.net/u/259577/blog/288443

總結

以上是生活随笔為你收集整理的与服务器交互的分页组件PageComponent的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。