Question

I’m using extjs 4 and I’ve a textarea in which a insert some text, the scroll bar is by default set on top so when the text exceeds the textarea height it overflows. I would like to have my textarea scrollbar set by default on its bottom, so when i insert new text it is immediately shown, without manually scrolling down the scroll bar.

The textarea code is something like this:

items: [{
    xtype: 'textareafield',
    id: 'textarea1',
    autoScroll: true,
    resizable: true,
    name: 'textarea1',
    autorender: true,
    fieldLabel: 'textarea1',
    value: '...'
    },{

I insert new text with

area.setValue(Ext.getCmp('textarea1').getValue()+'\n'+message);

but i can’t find any way to autoscroll it down. I’ve searched both the documentation and google, nowdays almost everyone uses gwt but i can’t. Is there a way to achieve the same goal using extjs methods only? In gwt they use methods like .setScrollTop() but there is nothing like it in extjs, of it is i can’t find it..

Many thanks for any help you can provide!

Answer 1

You can save the old string length of the area text then use selectText() to make the cursor go to the right place.

area.selectText(oldStringLength, oldStringLength);

selectText(start, end) is not actually aimed at this purpose but still can be used though.