`
sailei1
  • 浏览: 126554 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Sencha Touch TextArea 支持滑动

阅读更多
TextArea ios 支持滑动


Ext.define('Sai.view.TextArea', {
    extend: 'Ext.form.TextArea',
    xtype:'scrollTextArea',
   initialize: function() {
      this.callParent();
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
         this.handleTouchListener = Ext.bind(this.handleTouch, this),
         false);
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
         this.handleMoveListener = Ext.bind(this.handleMove, this),
         false);
      this.moveListenersAttached = true;
   },
   destroy: function() {
         if (this.moveListenersAttached) {
         this.moveListenersAttached = false;
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
            this.handleTouchListener,
            false);
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
            this.handleMoveListener,
            false);
         this.handleTouchListener = this.handleMoveListener = null;
      };
      this.callParent();
   },
   handleTouch: function(e) {
      this.lastY = e.pageY;
   },
      handleMove: function(e) {
          var textArea = e.target;
          var top = textArea.scrollTop <= 0;
          var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
          var up = e.pageY > this.lastY;
          var down = e.pageY < this.lastY;
          this.lastY = e.pageY;
     
          if((top && up) || (bottom && down))    e.preventDefault();
      
          if(!(top && bottom))    e.stopPropagation();
      }
});

1
0
分享到:
评论
1 楼 amwlgywxf 2013-05-17  
很有用,太厉害了,顶一个

相关推荐

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    Sencha Touch 是一款专为移动设备开发的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用。这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于...

    Sencha 和 Sencha Touch 简介

    本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...

    Sencha Touch in Action

    3. 用户界面组件:详细介绍Sencha Touch提供的各种用户界面组件,如按钮、列表、表单、滑动菜单等。 4. 应用结构与生命周期:解释如何组织Sencha Touch应用代码,以及应用的生命周期管理。 5. 触摸事件处理:讲解在...

    Sencha Touch开发的项目《般若人生》源码

    1. **跨平台兼容性**:Sencha Touch支持iOS、Android、BlackBerry等主流移动操作系统,通过HTML5、CSS3和JavaScript实现原生般的用户体验。 2. **丰富的组件库**:提供多种UI组件,如表格、网格、下拉菜单、按钮、...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...

    sencha touch项目源码

    4. **数据绑定**:Sencha Touch支持双向数据绑定,这意味着当模型数据改变时,视图会自动更新,反之亦然,简化了开发流程。 5. **触摸事件**:由于Sencha Touch面向移动设备,它提供了一系列触摸事件,如tap、swipe...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    sencha touch中文翻译文档

    6. **动画与触摸事件**:阐述Sencha Touch如何支持触摸事件和流畅的动画效果,以提升移动设备上的用户体验。 7. **主题与皮肤**:讨论如何定制和应用Sencha Touch的主题,以适应不同的设计风格和品牌需求。 8. **...

    一个完整的sencha touch 应用案例

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素,让我们逐一解析这些...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...

    api.zip_sencha _sencha touch api_sencha touch2 api

    5. **路由和导航**:Sencha Touch 2支持页面间的导航和URL路由,方便构建复杂的多页面应用。 6. **主题和皮肤**:API文档会解释如何定制和应用不同的主题来改变应用的外观。 **API文档的重要性** 对于开发者来说,...

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    senchaTouch和fusioncharts结合的实例

    - Sencha Touch 支持多种设备和浏览器,包括iOS、Android、Blackberry等。 - 它基于MVC(Model-View-Controller)架构,便于代码组织和维护。 2. **FusionCharts**: - FusionCharts 是一款纯JavaScript图表库,...

    Sencha Touch2 MVC Demo (含源码/数据库)

    2. **主题样式**:Sencha Touch 2支持多种视觉主题,如`touch/resources/css/sencha-touch.css`,提供了应用的外观和感觉。 3. **第三方库**:可能还包括其他必要的JavaScript库,如jQuery或Modernizr,这些库可能被...

    sencha touch sdk工具

    8. **兼容性与跨平台**:Sencha Touch SDK工具设计的目标是支持多平台,包括iOS、Android、Blackberry等主流移动操作系统。它通过HTML5、CSS3和JavaScript技术实现跨平台兼容,使开发者可以一次编写,到处运行。 综...

    sencha touch grid

    Sencha Touch Grid支持主题定制,可以使用Sencha CMD工具生成符合应用风格的主题。此外,还可以通过CSS类直接调整样式。 总结来说,Sencha Touch Grid是构建移动应用时处理数据展示的强大工具,其丰富的功能和灵活...

    sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch

    Sencha Touch 是一款专为移动设备设计的前端框架,它为开发者提供了构建触控友好的、高性能的Web应用程序的能力。1.0.1a是这个框架的一个早期版本,虽然现在可能已被更新版本所取代,但对于了解其发展历史和技术原理...

    Sencha Touch 2.4.1

    此外,Sencha Touch 2.4.1 还引入了一些新功能和改进,如增强的图表支持、更好的 Accessibility 支持以及对最新浏览器的兼容性更新。这些改进旨在帮助开发者更加高效地开发高质量的移动应用。 文件名称"touch-2.4.1...

Global site tag (gtag.js) - Google Analytics