sencha touch textarea 手机上不显示滚动条，且不能滚动

最近在项目中发现 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();
    }
});