与服务器交互的分页组件PageComponent

于 2014-07-08 18:34:00 发布
阅读量131 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/259577/blog/288443
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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事件。效果图如下：

182143_UnSp_259577.jpg

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

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

182806_qSAs_259577.jpg

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

转载于:https://my.oschina.net/u/259577/blog/288443

weixin_34405557
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值