sencha列表数据刷新和显示更多的插件模拟(iPhone & Android)
?
/*********************************************
?* List拖动刷新和显示更多的plugin
?* @revisor wangmeng
?* @date 2011-08-10
?*********************************************/
?
/**
?* 处理箭头旋转方向
?*/?
Ext.apply(Ext.anims, {
?? ?rotate: new Ext.Anim({
?? ? ? ?autoClear: false,
?? ? ? ?out: false,
?? ? ? ?before: function(el) {
?? ? ? ? ? ?var d = '';
?? ? ? ? ? ?if (this.dir == 'ccw'){
?? ? ? ? ? ? ?d = '-';
?? ? ? ? ? ?}
?
?? ? ? ? ? ?this.from = {
?? ? ? ? ? ? ? ?'-webkit-transform': 'rotate('+d+''+this.fromAngle+'deg)'
?? ? ? ? ? ?};
?
?? ? ? ? ? ?this.to = {
?? ? ? ? ? ? ? ?'-webkit-transform': 'rotate('+d+''+this.toAngle+'deg)'
?? ? ? ? ? ?};
?
?? ? ? ?}
?? ?})
});
//注册命名空间
Ext.ns('Ext.ux.touch');
?
/**
?* 继承Ext.util.Observable类，观察者模式监控处理实现此插件
?* @class Ext.ux.touch.ListPullRefresh
?* @extends Ext.util.Observable
?*/
Ext.plugins.ListPull= Ext.extend(Ext.util.Observable, {
??//构造器
??constructor: function(config, bottomVisible, id, barCnt){
??this.id = id;
??this.bottomVisible = bottomVisible;
??this.barCnt = barCnt;
?? ?Ext.apply(this,config);
?? ?this.addEvents({
?? ? ?'released': true
?? ?});
?? ?Ext.plugins.ListPull.superclass.constructor.call(this, config, bottomVisible);
??},
?
??//组件标识
??id: '',
??//默认刷新
??refresh: true,
??//底部提示是否显示
??bottomVisible: true,
??pullDownRefresh: '下拉可以刷新...',
??releaseRefresh: '松开即刷新...',
??pullUpMore: '上拉显示更多...',
??releaseMore: '松开即显示...',
??langLoading: '加载中...',
??//是否显示加载提示栏标量值
??loading: false,
??loadingEl: null,
??//显示模板及组件统一高度
??tplHeight: 50,
??//加载组件Tpl
??loadingTpl: new Ext.XTemplate(
?? ? ?'<div style="height: {h}; text-align: bottom;">',
?? ? ? ?'<div style="height: 50px; bottom: 0px; position: relative;">',
?? ? ? ? ?'<span style="height: {h}; text-align: bottom;">',
?? ? ? ?'<div style="height: 50px; bottom: 0px; position: relative;">',
?? ? ? ? ?'<span class="arrow {s}"></span>',
?? ? ? ? ?'<span class="msg">{m}</span>',
?? ? ? ? ?'<span class="lastupdate">最后刷新时间: {[Ext.util.Format.date(values.l,"m/d/Y H:i")]}</span>',
?? ? ? ?'</div>',
?? ? ?'</div>'
?? ? ),
?
??/**
?? * 组件初始化
?? * @param {Ext.List} cmp:list列表控件
?? */
??init: function(cmp){
?? ?this.cmp = cmp;
?? ?this.lastUpdate = new Date();
?? ?cmp.loadingText = undefined;
?? ?//检测列表控件被初始化时此插件初始化
?? ?cmp.on('render', this.initPullHandler, this);
??},
?
??/**
?? * 初始化操作处理
?? */
??initPullHandler: function(){
?? ?//顶部下拉提示条
?? this.pullDownTpl = this.pullTpl;
?? ?this.pullDownEl = this.pullDownTpl.insertBefore(this.cmp.scroller.el, {h:0,m:this.pullDownRefresh,l:this.lastUpdate}, true);
?? ?this.pullDownEl.hide();
?? ?Ext.Element.cssTranslate(this.pullDownEl, {x:0, y:-this.tplHeight});
?? ?//底部上拉提示条
?? ?if(this.bottomVisible){
?this.pullUpTpl = this.pullTpl;
this.pullUpEl = this.pullUpTpl.insertAfter(this.cmp.scroller.el, {h:0,m:this.pullUpMore,l:this.lastUpdate}, true);
this.pullUpEl.hide();
Ext.Element.cssTranslate(this.pullUpEl, {x:0, y:+this.tplHeight});
?? ?}
?
??//获取list组件所在容器面板
?? ?this.container = this.cmp.getBubbleTarget();
?? ?//监听list滚动条高度变化
?? ?this.cmp.scroller.on('offsetchange', this.handlePull, this);
??},
?
??/**
?? * 显示加载
?? * @param {Boolean} refresh:刷新开关标量
?? */
??showLoadingPromption: function(refresh){
?? ?/********************************************追加遮罩层***********************************************************************************/
?? ?this.container.setHeight(this.container.getHeight() + this.tplHeight);
?? ?this.container.addDocked({dock: refresh ? 'top' : 'bottom', xtype: 'toolbar', scroll: 'vertical', height: this.tplHeight, style:{width: '100%', background: '#e1e1e1', border: '0px solid #e1e1e1'}}, this.barCnt);
?? ?this.container.doLayout();
?? ?this.container.dockedItems.get(this.barCnt).show({type: 'slide', direction: refresh ? 'down' : 'up'});
?? ?this.loadingEl = this.loadingTpl.insertBefore(this.container.dockedItems.get(this.barCnt).scroller.el, {h:0,m:this.langLoading,l:this.lastUpdate}, true);
?? ?Ext.Element.cssTranslate(this.loadingEl, {x:0, y:0});
this.loadingEl.show();
//this.cmp.scroller.disable();此处禁用list的scroller可行，但在请求完成后再this.cmp.scroller.enable();则会不定时出现list的scroller影响插件的显隐，故一切都交给processComplete来处理即可
?? ?/*********************************************************************************************************************************/
??},
?
??/**
?? * 拖拽操作
?? */
??pullOperation: function(refresh, scroller, offset, tpl, el, releaseMsg, pullMsg, fromAngle, toAngle){
??//设定是否刷新标识量
??this.refresh = refresh;
?? ? ? ?Ext.Element.cssTranslate(el, {x:0, y:refresh ? offset.y-this.tplHeight : offset.y});
?? ? ? ?var flag = refresh ? offset.y > this.tplHeight : offset.y<=(this.cmp.getHeight()-scroller.size.height)-this.tplHeight;
?? ? ? ?if(flag){
?? ? ? ? ?if(this.state !== 1){
?? ? ? ? ?//控件最低|高位置
?? ? ? ? ? ?this.prevState = this.state;
?? ? ? ? ? ?this.state = 1;
?? ? ? ? ? ?tpl.overwrite(el, {h:offset.y,m:releaseMsg,l:this.lastUpdate});
?? ? ? ? ? ?Ext.Anim.run(el.select('.arrow').first(),'rotate',{dir:'ccw',fromAngle:fromAngle,toAngle:toAngle});
?? ? ? ? ?}
?? ? ? ?}else if(!scroller.isDragging()){
?? ? ? ?//滚动条是否已经被释放
?? ? ? ? ?if (this.state !== 3){
?? ? ? ? ? ?this.prevState = this.state;
?? ? ? ? ? ?this.state = 3;
?? ? ? ? ? ?if (this.prevState == 1){
?? ? ? ? ? ? ?this.loading = true;
?? ? ? ? ? ? ?this.lastUpdate = new Date();
?? ? ? ? ? ? ?this.fireEvent('released',this,this.cmp);
?? ? ? ? ? ? ?if(refresh){
?? ? ? ? ? ? ?el.hide();
?? ? ? ? ? ? ?//追加并显示加载组件
?? ? ? ? ? ? ?this.showLoadingPromption(refresh);
?? ? ? ? ? ? ?}else{
?? ? ? ? ? ? ?//底部加载
?? ? ? ? ? ? ?//tpl = this.loadingTpl;
?? ? ? ? ? ? ?//tpl.overwrite(el, {h:0,m:this.langLoading,l:this.lastUpdate});?
?? ? ? ? ? ? ?//el.show();
?? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ? ?}
?? ? ? ?}else{
?? ? ? ? ?if (this.state !== 2){
?? ? ? ? ?//控件最高|低位置
?? ? ? ? ? ?this.prevState = this.state;
?? ? ? ? ? ?this.state = 2;
?? ? ? ? ? ?tpl.overwrite(el, {h:offset.y,m:pullMsg,l:this.lastUpdate});
?? ? ? ? ? ?el.show();
?? ? ? ? ? ?if (this.prevState == 1){
?? ? ? ? ? ? ?Ext.Anim.run(el.select('.arrow').first(),'rotate',{dir:'cw',fromAngle:180-fromAngle,toAngle:180-toAngle});
?? ? ? ? ? ?}
?? ? ? ? ?}
?? ? ? ?}
??},
?
??//private
??handlePull: function(scroller, offset){
??try{
? ?if (scroller.direction === 'vertical' && !this.loading){
? ? ?if (offset.y > 0){
? ? ?//刷新
? ? ? this.pullOperation(true, scroller, offset, this.pullDownTpl, this.pullDownEl, this.releaseRefresh, this.pullDownRefresh, 0, 180);
? ? ?}else if(offset.y<=(this.cmp.getHeight()-scroller.size.height) && this.bottomVisible){
? ? ?//追加
? ? ?this.pullOperation(false, scroller, offset, this.pullUpTpl, this.pullUpEl, this.releaseMore, this.pullUpMore, 180, 0);
? ? ?}
? ?}
??}catch(e){}
??},
?
??/**
?? * 处理完成相关操作
?? */
??processComplete: function(){
??try{
?//重置加载控制标量值
? ?this.loading = false;
? ?//设定更新时间
? ?this.lastUpdate = new Date();
? ?this.pullDownTpl.overwrite(this.pullDownEl, {h:0,m:this.pullDownRefresh,l:this.lastUpdate});
? ?if(this.bottomVisible){
this.pullUpTpl.overwrite(this.pullUpEl, {h:0,m:this.pullUpMore,l:this.lastUpdate});
? ?}
? ?//移除加载层
? ?if(this.loadingEl != undefined){
? ?Ext.removeNode(this.loadingEl);
? ?}
? ?//移除顶部装载加载显示的bar
? ?var topDock = this.container.dockedItems.get(this.barCnt);
? ?if(topDock != undefined){
? ?topDock.hide({type: 'slide', direction: this.refresh == 'top' ? 'down' : 'up'})
? ?this.container.removeDocked(topDock, true);
? ?this.container.setHeight(this.container.getHeight() - 50);
? ?this.container.doLayout();
? ?}
??}catch(e){}
??}
});
?
//注册插件
Ext.preg('listpull', Ext.plugins.ListPull);
?
/**
?* list底部插件“更多”模块
?* @class Ext.plugins.ListMorePlugin
?* @extends Ext.util.Observable
?*/
Ext.plugins.ListMorePlugin = Ext.extend(Ext.util.Observable, {
loadMoreText : "更多",
//组件初始化
init : function(a) {
this.list = a;
this.loading = false;
//注册update事件
this.mon(a, "update", this.onListUpdate, this);
},
/**
* 针对list数据update处理
*/
onListUpdate : function() {
try{
//检测list记录数
if(this.list.store.getCount() < travelbook.constant.globalPageSize){
//小于页大小则不显示更多
this.el.hide();
}else{
//否则显示更多
this.el.show();
}
}catch(e){}
if (!this.rendered) {
this.render();
}
this.el.appendTo(this.list.getTargetEl());
this.el.removeCls("x-loading");
this.loading = false;
},
/**
* 追加层
*/
render : function() {
var b = this.list, c = b.getTargetEl(), a = '<div class="x-list-more-msg">' + this.loadMoreText + "</div>";
//创建与list同级并且同属于一个父容器的子节点
this.el = c.createChild({
cls : "x-list-more",
html : a
//html : a + Ext.LoadingSpinner
});
//注册tap点击事件
this.mon(this.el, "tap", this.onPagingTap, this);
this.rendered = true;
},
/**
* 定义tap点击处理事件函数
*/
onPagingTap : Ext.emptyFn()
});
//注册插件
Ext.preg("listmore", Ext.plugins.ListMorePlugin);
