文本區域字段不在設備上滾動的設備

在任何設備，當文本區用於沒有辦法把它的滾動...

但在瀏覽器中正常工作..

Any way to scoll the text area/atleast to auto resize.在設備

{ 
      xtype: 'fieldset', 
      title: 'TExt aRea', 

      defaults: { 
       labelWidth: '36%' 
      }, 
      items: [{ 
       xtype: 'textareafield', 
       label: 'textareafield', 

       clearIcon: true 
      }, 
      ] 
}

來源

2012-08-27 user1425472

我正在處理它的方法是在textareafield上聽取按鍵事件，並在事件處理程序中爲textarea設置足夠的高度以顯示所有內容。滾動然後由容器的滾動器處理。

下面是一個例子：

Ext.define('ExamplePanel', { 
    extend: 'Ext.Panel', 
    config: { 
     fullscreen: true, 
     scrollable: true, 
     items: { 
      xtype: 'textareafield', 
      itemId: 'textarea', 
      clearIcon: false 
     } 
    }, 

    initialize: function() { 
     this.down('#textarea').on('keyup', this.grow, this); 
     this.textarea = this.element.down('textarea'); 
     this.textarea.dom.style['overflow'] = 'hidden'; 
    }, 

    grow: function() { 
     this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content 
     this.getScrollable().getScroller().scrollToEnd(); 
    } 
});

試試它Sencha Fiddle。

我的解決方案基於這篇文章Gmail for Mobile HTML5 Series: Autogrowing Textareas。您可以在文章中找到更深入的解釋和純粹的JavaScript解決方案。

來源

2012-08-29 05:21:20

注意'scrollToEnd（）'的'的增長（）的最後一行'會導致頁面滾動到年底**即使用戶正在編輯textarea從更高點。**這可能不是所需的行爲。 –

所以我已經嘗試使用以下邏輯自動展開代碼。

   { 
        xtype: 'textareafield', 

        id:'NotesTextArea', 

        maxRows: 4, 
        styleHtmlContent: true, 
        label: '', 
        clearIcon: true 
       },

自動擴大文本區域字段的邏輯：

initComponent: function(component, options) { 

      var textarea = Ext.getCmp('NotesTextArea'); 
      textarea.on("keyup", function(field, event) { 
         var numOfRows=field.getValue().split("\n").length; 

         if(numOfRows>=4) 
         { 
          numOfRows= numOfRows++; 
          textarea.setMaxRows(numOfRows); 
         } 

         }); 
}

它擴展文本區域字段完美的每個新行，

來源

2012-08-29 06:54:12 user1425472

    textarea.on("keyup", 

        function(field, event) { 

        var numOfRows=field.getValue().split("\n").length; 

        if(numOfRows>=4) 
        { 
         numOfRows= numOfRows++; 
         textarea.setMaxRows(numOfRows); 
        } 

        });

}

是正確，但在文本清除它不會最小化高度因此，需要刪除，如果循環，則ANS將

   textarea.on("keyup", 
        function(field, event) { 
        var numOfRows=field.getValue().split("\n").length; 


         numOfRows= numOfRows++; 
         textarea.setMaxRows(numOfRows); 

        });

來源

2014-06-24 17:12:50 Arvind

似乎是不完整的答案... – byJeevan

Ext.define('MyApp.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); 
     } 
    }); 
}});

來源

2015-02-25 11:23:02

文本區域字段不在設備上滾動的設備

回答

相關問題