Ext 3.x support for IE 10?

[willigogs]

What issues are your customers encountering?

Everything should be easily fixable with small amends to the source files.

[adammascherin]

For anyone else wanting to repeat this course of action, I would recommend the following:

In ext-base-debug.js, search for the following pieces of code, then add the sections in green:

isIE = !isOpera && check(/msie/),
isIE7 = isIE && (check(/msie 7/) || docMode == 7),
isIE8 = isIE && (check(/msie 8/) && docMode != 7),
isIE9 = isIE && check(/msie 9/),
isIE10 = isIE && check(/msie 10/),
isIE6 = isIE && !isIE7 && !isIE8 && !isIE9 && !isIE10,

isIE : isIE,
/**
* True if the detected browser is Internet Explorer 6.x.
* @type Boolean
*/
isIE6 : isIE6,
/**
* True if the detected browser is Internet Explorer 7.x.
* @type Boolean
*/
isIE7 : isIE7,
/**
* True if the detected browser is Internet Explorer 8.x.
* @type Boolean
*/
isIE8 : isIE8,
/**
* True if the detected browser is Internet Explorer 9.x.
* @type Boolean
*/
isIE9 : isIE9,
/**
* True if the detected browser is Internet Explorer 10.x.
* @type Boolean
*/
isIE10 : isIE10,

Then in ext-all-debug.js, amend the following line of code to the following:

var cls = [' ',
Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : (Ext.isIE8 ? 'ext-ie8' : (Ext.isIE9 ? 'ext-ie9' : 'ext-ie10'))))
: Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
: Ext.isOpera ? "ext-opera"
: Ext.isWebKit ? "ext-webkit" : ""];

This is a great starting point, butafter some fooling around I found out that IE10 no longer supports css filters. With your modifications, ExtJS will try to render shadows using CSS filters on IE10 and since it no longer supports them you'll still get the ugly solid grey box. To fix this, you will also need to modify Ext.Shadow. There are several checks for isIE -- you will need to check if isIE && !isIE10 in order to fix this. Other than that, this fixes most, if not all fixes.

I would then simply recommend doing what I did, and search through the ext-all-debug.js file for all instances of "isIE" (there are too many to include here) and check if they need amending to include / exclude sections of code based on being "isIE10".

To avoid having to go through all instances of isIE, instead you can do this:

isIE = !isOpera && check(/msie/),isIE7 = isIE && (check(/msie 7/) || docMode == 7),
isIE8 = isIE && (check(/msie 8/) && docMode != 7),
isIE10 = isIE && check(/msie 10/),
isIE9 = isIE && (check(/msie 9/) || isIE10),
isIE6 = isIE && !isIE7 && !isIE8 && !isIE9 && !isIE10,

This way if using IE10, isIE9 and isIE10 will both be true, but the rest of ExtJS's code already has handling for isIE9 so you won't have to modify anything unless you need something specific like the fix for the shadows in IE10 (mentioned above)

[Sébastien Dolard]

Try this until 3.4.2 comes with ie10 support: http://webdesign.about.com/od/intern...view-in-ie.htm

[adammascherin]

Try this until 3.4.2 comes with ie10 support: http://webdesign.about.com/od/intern...view-in-ie.htm

The instructions in your link will definitely work, but if you want to take advantage of HTML5 features in IE10, this will break them, so it's not really a good solution. See the code snippets above posted by willigogs and myself.

[Sébastien Dolard]

I totaly agree.
Force compatibility mode is not a good solution and should be time limited only.

[brookd]

"A timeline that may change looks like a 3.4.2 for support subscribers could make it in Q1 of 2013."

Is this still true? Can we expect an update for 3.4 for IE10 support any time soon?

[evant]

Please see: http://www.sencha.com/forum/showthre...l=1#post946145

[uwolfer]

Based on other patches by others I have created a fully working solution for native IE10 support. This way you can use new IE10 features like CSS3 support in IE10.

If you are not using any own build tools, you can use http://www.sencha.com/products/jsbuilder to build an updated ext-all.js (see the readme-file included in that package).

I suggest you also to include the fix for recent WebKit browsers in order to fix grid rendering: http://www.sencha.com/forum/showthre...l=1#post891425

Btw, I'm thinking about creating an open Git-repository which includes all recent bugfixes required to use ExtJs3 in an application which needs to support all recent browser version. This way anybody who still uses ExtJs3 in a production environment and not wants to update in near future could contribute fixes and use this version. Are you interested in this idea?

--- ext3/adapter/ext/ext-base-debug.js
+++ ext3/adapter/ext/ext-base-debug.js
@@ -68,7 +68,8 @@ Ext.apply = function(o, c, defaults){
         isIE7 = isIE && (check(/msie 7/) || docMode == 7),
         isIE8 = isIE && (check(/msie 8/) && docMode != 7),
         isIE9 = isIE && check(/msie 9/),
-        isIE6 = isIE && !isIE7 && !isIE8 && !isIE9,
+        isIE10 = isIE && check(/msie 10/),
+        isIE6 = isIE && !isIE7 && !isIE8 && !isIE9 && !isIE10,
         isGecko = !isWebKit && check(/gecko/),
         isGecko2 = isGecko && check(/rv:1\.8/),
         isGecko3 = isGecko && check(/rv:1\.9/),
@@ -782,6 +783,11 @@ function(el){
          */
         isIE9 : isIE9,
         /**
+         * True if the detected browser is Internet Explorer 10.x.
+         * @type Boolean
+         */
+        isIE10 : isIE10,
+        /**
          * True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
          * @type Boolean
          */
diff --git ext3/resources/css/ext-all-notheme.css ext3/resources/css/ext-all-notheme.css
index 6bc6765..a9179f9 100644
--- ext3/resources/css/ext-all-notheme.css
+++ ext3/resources/css/ext-all-notheme.css
@@ -1361,7 +1361,8 @@ textarea {
     margin-bottom:10px;
 }
 
-.ext-strict .ext-ie9 .x-fieldset legend.x-fieldset-header {
+.ext-strict .ext-ie9 .x-fieldset legend.x-fieldset-header,
+.ext-strict .ext-ie10 .x-fieldset legend.x-fieldset-header {
     padding-top: 1px;
 }
 
diff --git ext3/resources/css/ext-all.css ext3/resources/css/ext-all.css
index 8ef5ab6..edad2ab 100644
--- ext3/resources/css/ext-all.css
+++ ext3/resources/css/ext-all.css
@@ -1864,7 +1864,8 @@ textarea {
     margin-bottom:10px;
 }
 
-.ext-strict .ext-ie9 .x-fieldset legend.x-fieldset-header {
+.ext-strict .ext-ie9 .x-fieldset legend.x-fieldset-header,
+.ext-strict .ext-ie10 .x-fieldset legend.x-fieldset-header {
     padding-top: 1px;
 }
 
diff --git ext3/resources/css/structure/form.css ext3/resources/css/structure/form.css
index 9e7684b..f9df08f 100644
--- ext3/resources/css/structure/form.css
+++ ext3/resources/css/structure/form.css
@@ -491,7 +491,8 @@ textarea {
     margin-bottom:10px;
 }
 
-.ext-strict .ext-ie9 .x-fieldset legend.x-fieldset-header {
+.ext-strict .ext-ie9 .x-fieldset legend.x-fieldset-header,
+.ext-strict .ext-ie10 .x-fieldset legend.x-fieldset-header {
     padding-top: 1px;
 }
 
diff --git ext3/src/ext-core/src/core/EventManager.js ext3/src/ext-core/src/core/EventManager.js
index f97e525..bf01392 100644
--- ext3/src/ext-core/src/core/EventManager.js
+++ ext3/src/ext-core/src/core/EventManager.js
@@ -602,7 +602,7 @@ Ext.onReady = Ext.EventManager.onDocumentReady;
         }
 
         var cls = [' ',
-                Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : (Ext.isIE8 ? 'ext-ie8' : 'ext-ie9')))
+                Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : (Ext.isIE8 ? 'ext-ie8' : (Ext.isIE9 ? 'ext-ie9' : 'ext-ie10'))))
                 : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
                 : Ext.isOpera ? "ext-opera"
                 : Ext.isWebKit ? "ext-webkit" : ""];
diff --git ext3/src/widgets/Shadow.js ext3/src/widgets/Shadow.js
index 666b25b..067d311 100644
--- ext3/src/widgets/Shadow.js
+++ ext3/src/widgets/Shadow.js
@@ -29,7 +29,7 @@ Ext.Shadow = function(config) {
             a.w = 0;
             a.l = a.t = o;
             a.t -= 1;
-            if (Ext.isIE) {
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isIE9) { // starting from IE10, it does not support legacy DX filters anymore
                 a.l -= this.offset + rad;
                 a.t -= this.offset + rad;
                 a.w -= rad;
@@ -41,7 +41,7 @@ Ext.Shadow = function(config) {
             a.w = (o * 2);
             a.l = -o;
             a.t = o - 1;
-            if (Ext.isIE) {
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isIE9) {
                 a.l -= (this.offset - rad);
                 a.t -= this.offset + rad;
                 a.l += 1;
@@ -55,7 +55,7 @@ Ext.Shadow = function(config) {
             a.l = a.t = -o;
             a.t += 1;
             a.h -= 2;
-            if (Ext.isIE) {
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isIE9) {
                 a.l -= (this.offset - rad);
                 a.t -= (this.offset - rad);
                 a.l += 1;
@@ -100,7 +100,7 @@ Ext.Shadow.prototype = {
             }
         }
         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10) - 1);
-        if (Ext.isIE) {
+        if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isIE9) {
             this.el.dom.style.filter = "progidXImageTransform.Microsoft.alpha(opacity=50) progidXImageTransform.Microsoft.Blur(pixelradius=" + (this.offset) + ")";
         }
         this.realign(
@@ -146,7 +146,7 @@ Ext.Shadow.prototype = {
         if (s.width != sws || s.height != shs) {
             s.width = sws;
             s.height = shs;
-            if (!Ext.isIE) {
+            if (!Ext.isIE6 && !Ext.isIE7 && !Ext.isIE8 && !Ext.isIE9) {
                 cn = d.childNodes;
                 sww = Math.max(0, (sw - 12)) + "px";
                 cn[0].childNodes[1].style.width = sww;
@@ -183,7 +183,7 @@ Ext.Shadow.prototype = {
 // Private utility class that manages the internal Shadow cache
 Ext.Shadow.Pool = function() {
     var p = [],
-        markup = Ext.isIE ?
+        markup = Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isIE9 ?
             '<div class="x-ie-shadow"></div>':
             '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
     return {
diff --git ext3/src/widgets/layout/MenuLayout.js ext3/src/widgets/layout/MenuLayout.js
index 1e3dd0b..c46fd00 100644
--- ext3/src/widgets/layout/MenuLayout.js
+++ ext3/src/widgets/layout/MenuLayout.js
@@ -92,7 +92,7 @@
             if(w){
                 ct.setWidth(w);
             }else if(Ext.isIE){
-                ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8 || Ext.isIE9) ? 'auto' : ct.minWidth);
+                ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8 || Ext.isIE9 || Ext.isIE10) ? 'auto' : ct.minWidth);
                 var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
                 ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
             }
diff --git a/web/core/module/resources/webapp/js/nice2/app/LoginWindow.js b/web/core/module/resources/webapp/js/nice2/app/LoginWindow.js
index 8d48554..e0d1bed 100644
--- a/web/core/module/resources/webapp/js/nice2/app/LoginWindow.js
+++ b/web/core/module/resources/webapp/js/nice2/app/LoginWindow.js
@@ -121,7 +121,7 @@ Ext.extend(nice2.app.LoginWindow, Ext.util.Observable, {
 
         this.loginPanel.initPanel();
 
-        if (!Ext.isWebKit && !Ext.isGecko && !Ext.isIE7 && !Ext.isIE8 && !Ext.isIE9) {
+        if (!Ext.isWebKit && !Ext.isGecko && !Ext.isIE7 && !Ext.isIE8 && !Ext.isIE9 && !Ext.isIE10) {
             this.unsupportedBrowser.show();
         }
         if ((Ext.isIE7 || Ext.isIE8)) {
-- 
1.8.1.5

[Ron Howard]

Make sure the isIE flags are set correctly also since your adding isIE10.

Ext JS 4.1 was fixed after I showed Don at Senchacon it was wrong for 4.1 beta.

Ext JS 3.x never got fixed on the documentmode with isIE flags.

It actually fixed a lot of css issues I was having with a custom theme by correcting the isIE flags between ext-base.js and ext-all.js.

http://www.sencha.com/forum/showthre...l=1#post619900

[tim594]

any movement on this? Q2 / 2013 is around the corner..... has the fix been officially released?