CODEWITHSUNDEEP
cordovasencha-touchextjssencha-touch-2
user1425472
user1425472

Reputation: 333

text area fields in sencha touch are not scrollable in devices

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
            },
            ]
}

Upvotes: 1

Views: 4227

Answers (4)

Vivek Gupta
Vivek Gupta

Reputation: 5

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

Upvotes: 0

Arvind
Arvind

Reputation: 1

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

                   });

Upvotes: 0

user1425472
user1425472

Reputation: 333

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 ,

Upvotes: 0

Ye Liu
Ye Liu

Reputation: 8986

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.

Upvotes: 2

Related Questions