PDA

View Full Version : Urgent - Errors in IE (ExtJS 4.0.2a) - Invalid Argument



RobWilson
25 Sep 2012, 1:10 PM
Hi,

I've got a web app that's working perfectly in most browsers, but, oddly Internet Explorer is giving me the following error:



Webpage error details


User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Tue, 25 Sep 2012 21:07:05 UTC




Message: Invalid argument.
Line: 8301
Char: 25
Code: 0
URI: http://10.211.55.5:8084/NBTraderLite/3rdParty/extjs-4.0.2a/ext-all-debug.js




I was using the ext-all.js file, but because it was minified I thought that the extra long line lengths might have made it complain, but as seen above the ext-all-debug.js file also fails to work.

The line that it fails on is within this block of code...



setStyle : function(prop, value){
var me = this,
tmp, style;


if (!me.dom) {
return me;
}
if (typeof prop === 'string') {
tmp = {};
tmp[prop] = value;
prop = tmp;
}
for (style in prop) {
if (prop.hasOwnProperty(style)) {
value = Ext.value(prop[style], '');
if (style == 'opacity') {
me.setOpacity(value);
}
else {
me.dom.style[Ext.core.Element.normalize(style)] = value; <<--- This line
}
}
}
return me;
},




I can't upgrade to a new version of ExtJS at the moment, I must get this web-app working with this version of ExtJS. Does anyone know why this error is happening, or more importantly how this can be resolved?

Many thanks,
Rob.

scottmartin
25 Sep 2012, 1:31 PM
Do you have a DOCTYPE set? Try removing and see if this helps.

Scott

RobWilson
25 Sep 2012, 11:29 PM
Yes, I did, based on recommendations that I read on various pages to prevent IE going in to 'compatability' mode.



<!--[if i]><![endif]-->
<!DOCTYPE html><html><head>
<!--[if ie]><meta http-equiv=X-UA-Compatible content="IE=Edge"><![endif]-->


<!--
NOTE - the page header was set to use the conditional sections to stop IE
going in to quirks mode, refer to the details in these URLs

http://målform.no/blog/no-condition-comments

(which points to 'the optimal way to insert x-uat-compatible'...)

http://målform.no/blog/x-ua-optimal#dothis

-->


I'm removing this now to see whether this changes anything, but I don't like it; it seems wrong :-)

RobWilson
25 Sep 2012, 11:50 PM
Nice idea, but there's no improvement - I still get the error message whether IE is in compatibility mode or not.

evant
26 Sep 2012, 12:33 AM
It's likely setting a negative size for something. Have a look through the stack trace, what are the relative/interesting parts?

RobWilson
26 Sep 2012, 12:53 AM
Hi,

Thanks for the speedy reply. Unfortunately in Internet Explorer most of the call stack shows anonymous functions, but this chunk of code...



setStyle : function(prop, value){
var me = this,
tmp, style;


if (!me.dom) {
return me;
}
if (typeof prop === 'string') {
tmp = {};
tmp[prop] = value;
prop = tmp;
}
for (style in prop) {
if (prop.hasOwnProperty(style)) {
value = Ext.value(prop[style], '');
if (style == 'opacity') {
me.setOpacity(value);
}
else {
me.dom.style[ELEMENT.normalize(style)] = value;
}
}
}
return me;
},


Shows that the 'value' varaible holds the string "white}", when I run the command by adjusting entering the following in the console



me.dom.style[ELEMENT.normalize(style)] = "white;";
Invalid property value.


Adjusted to this...



me.dom.style[ELEMENT.normalize(style)] = "white";
"white"


So why do I get a rogue brace? I noted that previously it showed "smaller}" as the value and I could tell exactly where that was in my code, I commented it out, then it complained about a style that I don't explicitly set...



{
xtype: 'panel',
id: 'orderEntryUserEntryId',
width: 550,
collapseDirection: 'left',
collapsible: true,
title: 'Order Entry',
titleCollapse: true,
region: 'west',
items: [
{
xtype: 'panel',
items: [
{
xtype: 'form',
bodyPadding: 10,
items: [
{
xtype: 'fieldset',
title: 'Search',
items: [
{
xtype: 'textfield',
id: 'searchFieldId',
width: 354,
fieldLabel: 'Search term',
anchor: '100%'
},
{
xtype: 'radiogroup',
id: 'searchTypeGroupId',
//width: 400,
fieldLabel: ' ', // Search Type,
labelSeparator:'',
//hideLabel: true,
autoHeight: true,
items: [
{
id: 'searchTypeTidmId',
boxLabel: 'Tidm',
name: 'searchType'
},
{
id: 'searchTypeIsinId',
boxLabel: 'ISIN',
name: 'searchType'
},
{
id: 'searchDescriptionTypeId',
boxLabel: 'Description',
name: 'searchType'
},
{
id: 'searchAllTypeId',
boxLabel: 'All',
checked: true,
name: 'searchType'
}
]
},
{
xtype: 'label',
id: 'selectedStockInfoId',
/*style: '{font-size:smaller}',*/
text: ''
}
]
}
]
}
]
},

evant
26 Sep 2012, 12:55 AM
Because it's not valid css, the braces are only used when declaring a rule.

RobWilson
26 Sep 2012, 12:58 AM
(as an experiment I upgraded to 4.0.7 without any improvement, so I'm sure it's something to do with the layout of some components, but pointers on how to diagnose this will be appreciated. My currently approach will be to comment out parts of the Json object literal that defines the UI until it does work, then follow a process of elimination).

I hate IE :((

RobWilson
26 Sep 2012, 1:01 AM
Because it's not valid css, the braces are only used when declaring a rule.

I am using the CSS that comes with EXT-JS, the only variation to this is a block of inline CSS...



<style type="text/css">
.grid-row-buy {background-color : lightblue !important;}
.grid-row-sell {background-color : #f62422 !important;}
.grid-row-success {background-color: lightgreen !important;}
.grid-row-fail {background-color: lightcoral !important;}
.excel-icon {background-image: url(ui/images/excel-logo.gif) !important;}
.audit-icon {background-image: url(ui/images/audit.png) !important;}
.bulk-upload-icon {background-image: url(ui/images/bulk-upload.png) !important;}
.logout-icon {background-image: url(ui/images/logout.png) !important;}
.edit-icon {background-image: url(ui/images/edit.png) !important;}
.cancel-icon {background-image: url(ui/images/cancel.png) !important;}


.cTextAlign {text-align:center; background:red}
</style>


Are you saying 'smaller' is invalid? 'white' isn't invalid, understandably 'white;' is invalid, but I don't have 'white;' anywhere in my definitions, so how is this being determined?

Thanks,
Rob.

evant
26 Sep 2012, 1:47 AM
I was talking about:



/*style: '{font-size:smaller}',*/


Again, I'd say follow the stack trace, just because it says it's an anon function doesn't mean you can't glean any information from it.

RobWilson
26 Sep 2012, 2:58 AM
Thanks again,

It turned out that there were two issues.

The first was exactly as you said, my style properties were invalid (it worked in other browsers except IE) and once that was fixed, I had encountered errors about 'locks', but a search in the forums made me realise that I had a few rogue commas at the end of column definitions.

Phew - at last it's working again.

Thank you all for your excellent support.

Rob.