首页 > 代码库 > 与服务器交互的分页组件PageComponent
与服务器交互的分页组件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点击事件的方法；
比如。这里定义了一个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页的话就会有这个工具条：
好了，这就是我的与服务器交互的分页组件；
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。