最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动。

在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条。 但在手机中是不会显示滚动条的。 可能在以后的版本中会有所改进吧。

于是只能另想办法了,找了一个老外重写的可滑动的 textarea (无滚动条)。

转:

Ext.define('LeslieTest.view.TextArea',
{
extend : 'Ext.field.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();
}
});

  

sencha touch textarea 手机上不显示滚动条,且不能滚动的更多相关文章

  1. android的开发 华为手机上不显示menu键

    android的开发,华为手机上不显示menu键解决办法: 在AndroidManifest.xml中讲targetSdkVersion改为9. <uses-sdk android:minSdk ...

  2. 手机上无法显示Toast信息

    关于手机上无法显示Toast信息, 是因为手机上的权限没有开, 在应用管理处将所有权限都打开,就可以显示了.

  3. Android popupwindow在低版本手机上无法显示

    popupwindow偶尔的显示失效(在低版本Android系统的手机上,测试机6.0)实在是坑害了不少人,害,而且坑了for a long time.本小白就是其中一个受害者. 百度了N久N多还是没 ...

  4. 跨平台的移动应用开发框架-Sencha Touch

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/tommychen1228/article/details/32959529 近期决定转以日常技术类文 ...

  5. sencha touch 问题汇总

    做sencha touch有一段时间了,目前而言,sencha touch在android上问题比较严重,在此对android中sencha touch的问题做一些汇总: 1.内存问题: 打包成安装程 ...

  6. [Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决的方法

    Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完毕后才会隐藏(display:none). 有些奇葩手机 ...

  7. 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

    从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...

  8. sencha touch 扩展篇之将sencha touch打包成安装程序(上)- 使用sencha cmd打包安装程序

    由于最近一直忙着android原生的开发,很久没有更新博客了,官方的sencha cmd工具功能非常强大,创建项目,压缩项目,打包安装程序都能轻松实现,这讲我们就给大家介绍下如何使用sencha cm ...

  9. 关于sencha touch在华为、红米等部分手机下hide事件失效,msgbox无法关闭的解决方案(已更新最新解决方案)

    (急着解决问题的同学可以直接跳最底部查看最终的解决方案) 问题描述 因为前段时间抢到了华为荣耀3c,所以做项目的时候就用荣耀3c测试了一下项目, 结果发现在华为的emotion ui上sencha t ...

随机推荐

  1. [Lua快速了解一下]Lua的MetaTable和MetaMethod

    MetaTable和MetaMethod是Lua中的重要的语法,MetaTable主要是用来做一些类似于C++重载操作符式的功能. 两个分数 fraction_a = {numerator=, den ...

  2. Android-帧布局(FrameLayout)

    帧布局的特点是,一层一层的覆盖在上面 帧布局,使用比较多的属性是: android:layout_gravity="bottom" 也支持这些属性的设置: <!-- andr ...

  3. 20145233《网络对抗》Exp5 MSF基础应用

    20145233<网络对抗>Exp5 MSF基础应用 实验问题思考 什么是exploit,payload,encode exploit是发现了的可以利用的安全漏洞或者配置弱点,这类模块存储 ...

  4. C#在线运行

    初步完成c#代码的在线编辑.       首先,传回前端的c#在线代码,进行预编译,用CSharpCodeProvider这个方法.设置编译版本3.5 设置编译参数GenerateInMemory:是 ...

  5. Hbase的安装与测试

    实验环境 虚拟机伪分布式 Ubuntu 17.10 JDK 1.8 Hadoop 2.7.6 Hbase 1.3.3 ①安装和配置HBase. 首先从官网http://archive.apache.o ...

  6. “全栈2019”Java第八十四章:接口中嵌套接口详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. C# combobox手动赋值

    DataTable dt = new DataTable(); dt.Columns.Add("REPAIR_VALUE"); dt.Columns.Add("REPAI ...

  8. hdfs shell的基本操作以及hdfsWeb查看文件

    在安装好hadoop集群并成功的启动了hdfs之后,我们就可以利用hdfs对文件进行操作了,一下是对文件的一些基本操作 hdfs基本操作 1.查询命令 hadoop dfs -ls /   查询/目录 ...

  9. centos yum安装php5.6.19 remi源按照

    yum安装php5.6 多版本php共存 remi安装方法 http://www.servermom.org/how-to-enable-remi-repo-on-centos-7-6-and-5/2 ...

  10. Web开发模式

    原文链接 开发模式的介绍(完善版) 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II). 首先我们来理清一些概念吧: DAO(Data Access Obj ...