Sencha Touch textareafield height solutions

Sencha Touch seems to have some problems with its textareafield, especially with sizing and resizing the height in a form. The best solutions I’ve found so far are:

Note that the first link is based on the code in the second link.

You can learn a lot about Sencha Touch by reading the code in these examples. The third link is interesting in that it overrides Ext.form.TextArea:

Ext.override(Ext.form.TextArea, {

    adjustHeight: Ext.Function.createBuffered(function(textarea){
        var textAreaEl = textarea.getComponent().input;
        if (textAreaEl) {
   = 'auto';
   = textAreaEl.dom.scrollHeight + "px";

    constructor: function() {
            scope: this,
            keyup: function (textarea) {
            change: function(textarea, newValue) {

I’ve found that you can set the textareafield height as follows, but it’s a non-cross-platform hack:

var noteField = {
    xtype: 'textareafield',
    name: 'note',
    label: 'Note',
    flex: 10,
    height: 360   // TODO this sets the height, but it's a kludge

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.