/*********************************************
* 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 class="loadingspacer" style="height: {h}; text-align: bottom;">',
'<div class="msgwrap" style="height: 50px; bottom: 0px; position: relative;">',
'<span class="loading"></span>',
'<span class="msg">{m}</span>',
'<span class="lastupdate">最后刷新时间: {[Ext.util.Format.date(values.l,"m/d/Y H:i")]}</span>',
'</div>',
'</div>'
),
//拖拽组件Tpl
pullTpl: new Ext.XTemplate(
'<div class="pullrefresh" style="height: {h}; text-align: bottom;">',
'<div class="msgwrap" 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);
分享到:
相关推荐
适合Sencha Touch刚入门者学习.项目下面的Index才是显示的页面.记得发布,不发布的话是显示不出来的
HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,包括对触控事件的增强,数据整合等。...
sencha touch在VScode上的插件
Sencha的Eclipse IDE插件是一个集成的开发环境工具,它可以在Eclipse软件和sencha框架之间顺畅的创建工程。这种集成表现在代码补全-与原生的eclipse行为无缝配合。 Sencha 专家将会爱上它对重构和源代码追踪带来的...
sencha touch2移动开发框架,ajax获取数据
参考博文: http://blog.csdn.net/jiangtongcn/article/details/44259257 主要介绍inappborowser插件的特殊应用场景
用于ExtJS和sencha touch中用到的倒计时插件
sencha touch 折叠list
sencha touch利用phonegap的file类接口开发android的文件浏览器,webapp的时代来临了。
Sencha Touch是专门用于移动...使用Sencha Touch,开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用,其效果看起来如同本地应用。目前Sencha Touch已经成为构建移动HTML5应用的领先框架。
如果你不是研究phoneGap和sencha的就别下载啊!浪费你的积分了!
sencha.js sencha.csssencha.js sencha.csssencha.js sencha.css
Sencha Touch是针对Mobile应用而开发的一套技术框架,它基于HTML5技术,开发的移动应用可以在iPad,iPhone,Android等不同的mobile平台使用,极大的简化前端开发人员的工作量,并保持界面的一致性。Sencha Touch由...
sencha touch grid
通过拖拽组件来创建富用户界面并连接到后端的数据源。 支持通过Sencha Touch 2来构建移动Web应用以及通过Ext JS 4来构建桌面Web应用。 其提供的代码编辑功能可以在Sencha Architect中创建整个应用。 支持模型——...
日历插件,用于前端开发
vscode 开发 ExtJS/ExtAngular 的插件,希望对你有帮助。
Sencha Touch是专门用于移动...使用Sencha Touch,开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用,其效果看起来如同本地应用。目前Sencha Touch已经成为构建移动HTML5应用的领先框架。
sencha touch 移动跨平台开发