Sencha Touch 2.0 - 如何在移动Safari的textarea中设置滚动？

Question

在我的移动Safari浏览器的项目，我需要建立一个信息发布功能。当文本行超过文本区域的最大行时，它需要在文本区域内滚动。我无法在Ext.field.textarea中找到'可滚动'属性，任何想法如何？ 干杯！

Answer 1

有联系2.0.x的一个bug使得框架明确地防止滚动操作。据说一个修补程序将在2.1，虽然我没有正式看到，只是从一个论坛上的人。

在此之前，有一种用于touch1解决这里http://www.sencha.com/forum/showthread.php?180207-TextArea-scroll-on-iOS-not-working，你可以移植到V2。它基本上包括将一个事件侦听到实际textarea的领域（不是煎茶对象），然后调用了preventDefault如果它是一个有效的表示ScrollEvent。

完整的代码是在那个环节，但突出的位都在这里。

抓住< textarea的>字段（不是煎茶触摸对象）直接使用addListener申请 'handleTouch' 上touchstart和 'handleMove' 上touchmove

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; 

    // default (mobile safari) action when dragging past the top or bottom of a scrollable 
    // textarea is to scroll the containing div, so prevent that. 
    if((top && up) || (bottom && down)) { 
    e.preventDefault(); 
    e.stopPropagation(); // this tops scroll going to parent 
    } 

    // Sencha disables textarea scrolling on iOS by default, 
    // so stop propagating the event to delegate to iOS. 
    if(!(top && bottom)) { 
    e.stopPropagation(); // this tops scroll going to parent 
    } 
} 

Answer 2

Ext.define('Aspen.util.TextArea', { 
override: 'Ext.form.TextArea', 
adjustHeight: Ext.Function.createBuffered(function (textarea) { 
    var textAreaEl = textarea.getComponent().input; 
    if (textAreaEl) { 
     textAreaEl.dom.style.height = 'auto'; 
     textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px"; 
    } 
}, 200, this), 

constructor: function() { 
    this.callParent(arguments); 
    this.on({ 
     scope: this, 
     keyup: function (textarea) { 
      textarea.adjustHeight(textarea); 
     }, 
     change: function (textarea, newValue) { 
      textarea.adjustHeight(textarea); 
     } 
    }); 
} 

}）;