PDA

View Full Version : textarea content change causes form redraw, hiding the writing area



yyogev
2 Oct 2012, 8:32 AM
Hi,

I have a (rather complicated) form inside the center region of a view port, with a text area field for comments, located at the bottom of the form. The comment field can grow considerably to accommodate long comments. The form has autoScroll:true, as in some resolutions it might not fit fully into the screen.

When the text area grows big enough so that the form has a vertical scroll bar, I see a strange behavior: when I add text at the end of the comment text (even on the same line), it causes the form to be redrawn, so the part of the text area where I was writing is now below the visible area. It makes writing any more text inside the text area virtually impossible.
This behavior was seen in Linux in Chrome 22 and IceWeasel 10.0.7 (FireFox). I also saw this in Internet Explorer 8 on Windows XP.

I found that this happens in the autoSize call on the change event (ext-all-debug.js l.84351, for ExtJS 4.1.2).
If the text area has grow:true it calls updateLayout(), which results in updateLayout() being done for the form.

I was able to reproduce this with the following code, using resolution 1024*768 or smaller:



<!doctype html>
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<META http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<LINK rel="stylesheet" type="text/css"
href="/lib/extjs/resources/css/ext-all.css" />
<SCRIPT src="/lib/extjs4/ext-all-debug.js"></SCRIPT>
<SCRIPT src="test.js"></SCRIPT>
<!-- the ext-js spacer -->
<SCRIPT>
Ext.BLANK_IMAGE_URL = "/images/ext/default/s.gif";
</SCRIPT>
<SCRIPT >
Ext.onReady(test);
</SCRIPT >
</HEAD>
<BODY>
</BODY>
</HTML>



Ext.ns("sample");

function test()
{
var viewport = new Ext.Viewport({
layout: "border",
id: "viewport",
renderTo: Ext.getBody(),
items:
[
{
region: "north",
xtype: "panel",
border: true,
html: "header area",
height: Ext.getBody().getHeight() - 300,
minHeight: 200
},
{
region: "center",
xtype: "form",
autoScroll: true,
defaultType: "textfield",
items: [
{id: "field1", fieldLabel: "Field 1"},
{id: "field2", fieldLabel: "Field 2"},
{id: "field3", fieldLabel: "Field 3"},
{id: "field4", fieldLabel: "Field 4"},
{id: "field5", fieldLabel: "Field 5"},
{id: "field6", fieldLabel: "Field 6"},
{id: "field7", fieldLabel: "Field 7"},
{id: "field8", fieldLabel: "Field 8"},
{id: "field9", fieldLabel: "Field 9"},
{
xtype: "textarea",
width: 400,
grow: true,
growMin: 100,
growMax: 200
}
]
}
]
});

}


if I change this code
height: Ext.getBody().getHeight() - 300,
minHeight: 200
to be
height: 200, this behavior no longer happens.

Is this a bug or am I doing something wrong here ?

yyogev
4 Oct 2012, 5:08 AM
See here:
http://www.sencha.com/forum/showthread.php?184206-Change-in-validation-state-causes-form-to-scroll

yyogev
26 Nov 2012, 7:10 AM
A bug report was created for this: EXTJSIV-7713

sdruckerfig
5 Feb 2014, 11:06 AM
Yeah, that's a nasty one...I came up with a bit of a kludgy workaround that resizes the textarea after it loses focus...



{
xtype: 'textareafield',
maxWords: 250,
fieldLabel: 'Brief Description',
labelAlign: 'top',
name: 'abstractText',
grow: true,
vtype: 'wordlimit',
listeners: {
focus: {
fn: function() { Ext.suspendLayouts(); }
},
blur: {
fn: function() { Ext.resumeLayouts(true); }
}
}
}

yyogev
8 Feb 2014, 11:19 PM
Hi @sdruckerfig,

Unfortunately it does not solve my problem as the text area will not grow when layouts are suspended.

I can only hope this bug will be handled in the near future, as its handling was already delayed for more than a year.

Yaron