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:
HTML Code:
<!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>
Code:
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
Code:
height: Ext.getBody().getHeight() - 300,
minHeight: 200
to be , this behavior no longer happens.
Is this a bug or am I doing something wrong here ?
Unanswered: textarea content change causes form redraw, hiding the writing area
Looks like this is the same as bug EXTJSIV-5491
Reply With Quote