text area fields in sencha touch are not scrollable in devices

Question

TextArea scroll on devices not working

On any device, when text area is used there is not way to scroll it...

but in browser it works fine..

Any way to scoll the text area / atleast to auto resize. in Device

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

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

                clearIcon: true
            },
            ]
}

score 2 · Answer 1 · answered Aug 29 '12 at 05:21

The way I'm handling it is to listen the keyup event on the textareafield, and in the event handler, set enough height to the textarea to show all the content. Scrolling is then handled by the container's scroller.

Here is an example:

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

Try it on Sencha Fiddle.

My solution is based on this article Gmail for Mobile HTML5 Series: Autogrowing Textareas. You can find a more in-depth explanation and a bare JavaScript solution in the article.

Note that `scrollToEnd()` in the last line of `grow()` will cause the page to scroll to the end **even if the user is editing the textarea from some point up higher.** That is probably not the desired behavior. — Kevin Cooper, Jul 19 '13 at 14:03

score 0 · Answer 2 · answered Aug 29 '12 at 06:54

so i have tried auto expand code using the following logic.

               {
                    xtype: 'textareafield',

                     id:'NotesTextArea',

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

the logic for auto expand text area field:

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

                       });
}

it expands the text area field for each new line perfectly ,

score 0 · Answer 3 · answered Jun 24 '14 at 17:12

                   textarea.on("keyup",

                   function(field, event) {

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

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

                   });

}

is correct but on text clear it does not minimises the height So, need to remove that if loop then ans will be

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


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

                   });

score 0 · Answer 4 · answered Feb 25 '15 at 11:23

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

text area fields in sencha touch are not scrollable in devices

4 Answers4