View Full Version : Auto scrolling to end of read only textarea

4 Oct 2012, 1:35 AM

I am trying to auto scroll a read only textarea however none of the solutions I have found online are working for me. I am an Ext JS beginner.

Using 'http://dev.sencha.com/deploy/ext-4.0.0/examples/form/absform.html' as an example I have built a similar window. The last item in panel is as follows:

this.mPanel = new Ext.FormPanel({ layout: 'absolute',
border: false,
}, {
y: 155,
id: 'output',
xtype: 'textarea',
margin: 0,
hideLabel: true,
readOnly: true,
autoScroll: true,
name: 'msg',
anchor: '-5 -5' // anchor width and height

To update the value I am doing the following:

var textOutput = this.mPanel.getComponent('output').getValue();
this.mPanel.getComponent('output').setValue(textOutput + 'some other value\n');

After this I have tried multiple different method to get the textarea to scroll to the bottom e.g.

(1) this.mPanel.getComponent('output').getEl().dom.scrollTop = 99999;
(2) this.mPanel.getComponent('output').selectText(textOutput.length);
(3) this.mPanel.getEl().scroll('b', Infinity);
(4) this.mPanel.getComponent('output').getEl().scrollBy(100,100, true);
It may be that one of the options I have tried were almost (but not quite right!). Help would be greatly appreciated. :)

4 Oct 2012, 1:40 AM
Just to add we are using 4.0 (not 4.1)

4 Oct 2012, 3:38 AM
I found an alternative solution from the sencha examples:


4 Oct 2012, 9:24 AM
Format your code using

Try selecting only last letter of entered text