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:

• FullScreenTextArea.js
• A better TextAreaField
• Adjusting the height on events, such as ’keyup’

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

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