View Full Version : [OPEN-1469] [Ext 3.3.0] textarea with grow and growmax ignored by Internet Explorer

michael melsen
27 Dec 2010, 1:02 AM
hi all,

I have a textarea that will be filled with XML SOAPmessages for display purposes. On firefox all text is displayed without any scrollbars, however when viewing this on Internet Explorer I always get a scrollbar. It looks like the growMax and grow true is ignored by ie. Here is the code I use:


MessageXMLViewer = Ext.extend(Ext.form.TextArea, {

timestamp : undefined, // required key part for the message, must be set by the caller!
identifier : undefined, // required key part for the message, must be set by the caller!
type : undefined, // required type ('message'or 'reponse'), must be set by the caller!

initComponent : function() {

Ext.apply(this, {
grow : true,
growMax : 10000, // set growmax as grow has a default of 10000
readOnly : true, // make the panel read-only
dataUrl : "services/broker/getLog{kind}AsPrettyPrintedXml"
}); // eo apply

if (this.type === 'message'){
this.dataUrl = this.dataUrl.replace("{kind}", 'Message');
} else {
this.dataUrl = this.dataUrl.replace("{kind}", 'Response');

// call parent
MessageXMLViewer.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender : function() {
url : this.dataUrl,
method : 'POST',
params : {
"timestamp": this.timestamp,
"identifier": this.identifier
scope : this, // the scope for the callback function
callback : function(options, success, response){
if (success) {
this.setValue(response.responseText); // RESPONSE WILL CONTAIN LARGE SOAP/XML FILE 2000+ LINES
} else {
MessageXMLViewer.superclass.onRender.apply(this, arguments);


}); // eo extend

// register component
Ext.reg('messagexmlviewer', MessageXMLViewer);

This textarea is part of a tabpanel that on its turn is part of a rowpanelexpander that is used in a grid.

I've done some additionaly debugging and noticed that the problem
relates to the function autoSize in the Ext.form.TextArea code. If I
change the value of the variable h by adding an additional 10 % then the
scrollbar in ie dissapears and the textarea is displayed as it does on
ff. Obviously this is a bad hack, so I hope this gives someone a clue
what I should do to fix this problem in a more convenient way. The
altered code is displayed in red:

autoSize: function(){
if(!this.grow || !this.textSizeEl){
var el = this.el,
v = Ext.util.Format.htmlEncode(el.dom.value),
ts = this.textSizeEl,

if(v.length < 1){
v = " ";
v += this.growAppend;
v = v.replace(/\n/g, ' <br />');
ts.innerHTML = v;
h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
if (Ext.isIE) {
h = h + (h * 0.1);
if(h != this.lastHeight){
this.lastHeight = h;
this.fireEvent("autosize", this, h);

Environment properties:

Browser IE7 IE8 IE9 Beta FF3.6.13
OS Windows 7 Windows XP

fill a textarea on render with large xml messages and let the parent handle the sizing of the textarea.

27 Dec 2010, 1:19 AM
Older Ext versions had a growPad config option that would be added to the calculated height (so not 10%, but a fixed number of pixels).

Maybe that is still needed?

michael melsen
27 Dec 2010, 1:57 AM
Hi Condor,

Hope you don't might me bothering with this issue. do you want that growPad config option in addition to the already existing growMax and grow config options? I would opt for making the growMax work on ie as it seems it doesn't work correct at the moment. Another config option might decrease the user/developer friendliness of the text area.