`
三里小龙
  • 浏览: 87598 次
  • 性别: Icon_minigender_1
  • 来自: 孝感
社区版块
存档分类
最新评论

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 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显示本地josn数据

    在“Sencha Touch显示本地json数据”这个主题中,我们将深入探讨如何使用Sencha Touch来加载和显示存储在本地的JSON数据。对于初学者来说,这是理解Sencha Touch如何与数据交互的重要步骤。 首先,我们需要理解JSON...

    Sencha 和 Sencha Touch 简介

    HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,包括对触控事件的增强,数据整合等。...

    sencha touch2 ajax 获取数据

    除了使用`Store`,Sencha Touch2还提供了`Ext.Ajax.request`方法,这是一种更直接的使用AJAX的方式,适用于特定场景下的数据请求。 ```javascript Ext.Ajax.request({ method: 'POST', url: prefix + '/doc/...

    PhoneGap+Sencha-touch2.0实现的android程序

    PhoneGap和Sencha Touch是两种在移动应用开发中广泛使用的框架,它们的结合可以让你创建跨平台的原生感观的Android应用程序。本教程将深入探讨如何利用PhoneGap和Sencha Touch 2.0来构建Android应用。 PhoneGap,现...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

    sencha touch和ExtJS使用的日历插件

    1. **多视图展示**:支持日视图、周视图、月视图和年视图等多种显示模式,适应不同用户的查看需求。 2. **事件创建与编辑**:用户可以方便地添加、编辑和删除日历事件,插件通常会提供弹出窗口或表单来收集详细信息...

    Sencha EXTJS的 Eclipse 插件安装指南

    Sencha的Eclipse IDE插件是一个集成的开发环境工具,它可以在Eclipse软件和sencha框架之间顺畅的创建工程。这种集成表现在代码补全-与原生的eclipse行为无缝配合。 Sencha 专家将会爱上它对重构和源代码追踪带来的...

    sencha.js sencha.css

    它还支持数据网格、图表和各种其他UI元素,使开发者能够创建功能强大的、响应式的多页面应用。 **sencha.css**: 这个CSS文件是Sencha UI的基础样式文件,用于定义Ext JS组件的外观和感觉。它包含了预设的样式,...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏...通过理解和实践这个示例,开发者可以更好地掌握Sencha Touch中数据驱动UI的设计原则,以及如何创建交互式的移动应用。

    ExtJS和Sencha touch可用到的倒计时插件

    ExtJS和Sencha Touch是两种流行的JavaScript框架,用于构建富客户端Web应用程序。它们都由Sencha公司开发,提供了丰富的组件库...通过熟练掌握这些插件的使用,你可以在Web应用开发中提升用户体验并实现更多创新功能。

    sencha-touch + cordova(PhoneGap)使用adt-eclipse打包实例

    Sencha Touch 是一个专门用于创建触屏设备上的富交互应用的JavaScript库,提供了丰富的UI组件和强大的数据管理功能。Cordova(PhoneGap)则是一个开源框架,它允许开发者使用Web技术(HTML、CSS和JavaScript)来构建...

    VS Code 搭配 Sencha Plugin 插件简直不要太好用.用于开发 ExtJS/ExtAngular

    搭配Sencha Plugin插件,它可以为开发ExtJS和ExtAngular项目提供强大的支持。这篇文章将详细介绍如何使用VS Code和Sencha Plugin插件来提升你的前端开发效率。 首先,让我们了解一下ExtJS。ExtJS是一个用于构建富...

    SenchaSencha

    Sencha

    sencha touch 折叠list

    在Sencha Touch中,`折叠List`(Accordion List)是一种特殊类型的列表,用于展示可以展开和折叠的条目,这种设计常用于展示层级关系的数据或节省屏幕空间。 `折叠List`的核心概念是`Ext.dataview.Accordion`,它...

    Sencha Architect 2.X官方多个项目实例

    "Sencha Architect 2.X官方多个项目实例"提供了多个实际应用案例,帮助用户深入理解和学习如何使用该工具。 1. **SimpleTasks-master**:这是一个简单的任务管理应用,展示了如何在Sencha Architect中创建数据驱动...

    senchatouch相机使用和cordova appbrowser插件使用案例

    总之,`senchatouch相机使用和cordova appbrowser插件使用案例`的主题涵盖了使用Sencha Touch和Cordova构建混合移动应用的核心技术,包括通过`appbrowser`插件在应用内打开网页,以及通过`cordova-plugin-camera`...

    sencha touch grid

    Sencha Touch Grid是一款专为移动设备设计的数据网格组件,它属于Sencha Touch框架的一部分。Sencha Touch是一个流行的JavaScript库,用于构建高性能、跨平台的触摸友好型移动应用程序。Grid组件在移动应用中常用于...

    sencha-touch grid 代码

    1. **组件化设计**:Sencha Touch Grid基于组件模型,这意味着你可以将网格视为由多个可重用部分组成的单元,如行、列、头部和体部。这使得定制和扩展变得容易。 2. **数据绑定**:Grid与Sencha的数据存储(Store)...

    Sencha touch 移动开发

    - **ListView**:列表视图用于展示数据列表,可以方便地添加滚动功能。 - **DetailView**:详情视图用于显示单个项目的详细信息,例如酒吧的详细信息。 - **ContactTab**:联系人标签页可以展示用户的联系信息。 - *...

    sencha touch1.1.0

    它提供了丰富的 UI 组件、数据管理和触摸事件处理机制,使得开发者可以轻松地构建跨平台的移动应用,兼容 iOS、Android 和其他主流移动操作系统。 在 "nestedList" 示例中,我们能看到 Sencha Touch 如何处理层次...

Global site tag (gtag.js) - Google Analytics