與服務器交互的分頁組件PageComponent
Ext.define('tools.PageComponent', {
extend : 'Ext.Container',
requires : [],
config : {
params : null,
itemTpl : null,//list的itemTpl
emptyText : "沒有內容",
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設置store
this.applyPageNum();//設置當前頁/總頁
this.changeBtnStatus();//改變工具欄的顯示或隱藏
this.setPageCount(null);
} else if($(str).find(me.getResultMsgName()).text()){//有resultMsg
alert($(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點擊事件的方法；ajax
好比。這裏定義了一個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事件。效果圖以下：app
頁面樣式沒有調，就將就看吧，這裏下面的工具條沒有顯示出來，由於源碼中我設置了須要總的條數要大於每一頁顯示的條數纔會顯示出下面的工具條（即上一頁，當前頁/總頁，下一頁）;框架
若是總頁數超過1頁的話就會有這個工具條：ide
好了，這就是個人與服務器交互的分頁組件；工具
相關文章
- 1. ajax與服務器交互
- 2. 用戶與服務器的交互：cookie
- 3. linux與window ftp 服務器的交互
- 4. Android與服務器交互的流程
- 5. 獲取地址上的ID（頁面與服務器的交互）
- 6. 頁面與服務器的交互，，經典案例
- 7. 在Html5中與服務器交互
- 8. UE4與WEB服務器交互(json)
- 9. app 與服務器交互 token
- 10. Android 與服務器端數據交互
- 更多相關文章...
- • 服務器上的 XML - XML 教程
- • Git 服務器搭建 - Git 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章