CODEWITHSUNDEEP
extjssencha-touch-2
Travis Webb
Travis Webb

Reputation: 15018

How can I size a Ext.field.TextArea to be exactly the size of the text with no scrollbars?

I have a Ext.field.TextArea in a Sencha Touch 2 app. I just want it to expand in height based on the text that it contains. How can I do this? It seems like such a basic/simple feature, but I can't find it in the API.

I'm using this component to display some static multi-line text -- is there another component that may be better suited for this task?

Any help is appreciated, thanks.

Upvotes: 3

Views: 7315

Answers (2)

E. Fortes
E. Fortes

Reputation: 1338

I solved it this way:

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

});

Upvotes: 1

richardtallent
richardtallent

Reputation: 35374

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

I would recommend looking into just using a lightweight Ext.container.Container component, or maybe a Panel or Window if you need fancier chrome around it.

Upvotes: 0

Related Questions