How can I Ext.field.TextArea size be exactly the size of the text without scrollbars?

Question

I have Ext.field.TextArea in a Sencha Touch 2 application. I just want it to expand in height based on the text it contains. How can i do this? It looks like such a basic / simple function, but I cannot find it in the API.

I use this component to display some static multi-line text - is there another component that might be better suited for this task?

Any help is appreciated, thanks.

Answer 1

I solved it like this:

 Ext.define('ParentsApp.component.TextAreaAutomaticRow', { extend: 'Ext.form.Select', xtype: 'textareaautomaticrow', config: { maxRows: 2, autoHeight: true, listeners: { keyup: function (field, event) { if (field.autoHeight) { var numOfRows = field.getValue().split("\n").length; if( numOfRows >= 2) { numOfRows = numOfRows++; field.setMaxRows( numOfRows ); } else if (numOfRows < field.getMaxRows()) { field.setMaxRows( numOfRows + 1 ); } } } } }, 

});

Answer 2

Using form elements for non-format elements is not an optimal solution.

I would recommend you just use the lightweight Ext.container.Container component, or perhaps a panel or window if you need more convenient chrome around.