One thing is for certain it’s not a perfect world, and there are imperfect solutions out there that make for a perfect user experience if you know what I mean.

Recently, I’ve had to tackle some rather esoteric IE bugs that happen only on that platform. The error in question this time comes from the extjs package and not the browser so what you get in a production environment running ext-all.js in both 4.x and 3.4 is an error in the ext-all.js javascript file.

Of course, the first thing you want to do is switch to ext-all-debug.js and check what line throws the error. You find out that it happens right around line 2921 in the setStyle function. The code is below with one addition, a try … catch block that will alert the property that the error occurred on.

setStyle : function(prop, value){
            var tmp, style;
           // alert(value);
            if (typeof prop != 'object') {
                tmp = {};
                tmp[prop] = value;
                prop = tmp;
            }
            for (style in prop) {
                value = prop[style];
	try{
					 
	style == 'opacity' ?  this.setOpacity(value) : this.dom.style[chkCache(style)] = value;
	} catch(err){
	/*// alert(value);
	   for (x in prop){
		alert('error Thrown' + x + '  -- ' ); 
		}
	   alert(err.name + ' - ' + err.number + ' - ' + err.description );*/
		return true;
	  }
            }		
            return this;
        }

Given that the error occurred in the setStyle function my first inclination was to go back through every style, and bodyStyle config option in the app and make sure that the css was correct. Next I went ahead and looked at any padding config options and corrected anything that seemed amiss. I knew approximately where the error was occurring due to the loop below but that proved little help. Once again using firebug was out of the question as this only happened on IE8/9.

Now you’ve reached the point where you decide to do the unthinkable, change the ext-all file itself to add a throw – catch around the style equals statement. Why?

Now onto a new challenge finding the needle in the haystack that is the minified extjs javascript file!
I have a screen shot that shows the code after it has been changed below for your reference. To find the point where you have to change the code fire up your IDE and search for the following line:

	G=="opacity"?this.setOpacity(H):this.dom.style[v(G)]=H
 

Replace it with this:

try{G=="opacity"?this.setOpacity(H):this.dom.style[v(G)]=H}catch(err){return true}}return this} 

Here’s the code around it for reference: