mobile - Sencha Touch 2.0 - Mobile Safari のテキストエリア内でスクロールを設定するには?

Question

私のモバイル サファリ プロジェクトでは、メッセージ投稿機能を作成する必要があります。テキストの行がテキスト領域の最大行数を超える場合、テキスト領域内をスクロールする必要があります。Ext.field.textarea に「スクロール可能な」プロパティが見つかりませんでした。乾杯！

Answer 1

touch 2.0.x にはバグがあり、フレームワークが明示的にスクロール アクションを妨げます。おそらく、修正は 2.1 で行われるでしょうが、私はそれを公式には見ませんでした.フォーラムの男からだけです.

それまでは、 http: //www.sencha.com/forum/showthread.php?180207-TextArea-scroll-on-iOS-not-workingに V2 に移植できるtouch1 の解決策があります。基本的には、実際の textarea フィールド (sencha オブジェクトではない) に eventlistener を追加し、それが有効な scrollevent である場合は preventdefault を呼び出します。

完全なコードはそのリンクにありますが、重要な部分はここにあります。

<textarea> フィールド (Sencha Touch オブジェクトではない) を直接取得し、addListener を使用して touchstart に「handleTouch」を適用し、touchmove に「handleMove」を適用します。

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);
        }
    });
}

});