What issues are your customers encountering?
Everything should be easily fixable with small amends to the source files.
Printable View
What issues are your customers encountering?
Everything should be easily fixable with small amends to the source files.
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.Quote:
Originally Posted by willigogs
To avoid having to go through all instances of isIE, instead you can do this:Quote:
Originally Posted by willigogs
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)Code: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,
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.Quote:
Originally Posted by Sébastien Dolard
I totaly agree.
Force compatibility mode is not a good solution and should be time limited only.
"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?
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?
Code:--- 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
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
any movement on this? Q2 / 2013 is around the corner..... has the fix been officially released?