PDA

View Full Version : IE8/IE7(compat mode) issues



paulr88
16 Nov 2010, 2:03 PM
All,
have a little issue with IE :::shocker:: All other browsers seem to behave. The problems are with Ext.LoadMask and Ext.Window with an Ext.FormPanel.

IE8 in compatibility mode:

1) FormPanel in Window, has top border missing from the first text field. See attached image.
2) LoadMask works

IE8 not in compatibility mode:

1) FormPanel in Window renders correctly
2) LoadMask only renders the ext-el-mask-msg div, not the ext-el-mask

Anyone seen/fixed these issues previously?

paulr88
16 Nov 2010, 2:44 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Title</title>
<link href="/js/ext-3.3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="/js/ext-3.3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-3.3.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var m = new Ext.LoadMask(Ext.getBody(),{msg:'loading'});
m.show();
});
</script>
</head>
<body>
</body>
</html>

and

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Title</title>
<link href="/js/ext-3.3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="/js/ext-3.3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-3.3.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//var m = new Ext.LoadMask(Ext.getBody(),{msg:'loading'});
//m.show();
var frm1 = new Ext.FormPanel({
frame: true,
id: 'frm1',
defaultType: 'textfield',
labelWidth: 65,
layout:'form',
monitorValid: true,
items: [
{
fieldLabel: "username",
name: 'loginUsername',
allowBlank: false,
width: 'auto',
anchor: '100%'},
{
fieldLabel: "password",
name: 'loginPassword',
inputType: 'password',
allowBlank: false,
anchor: '100%'}]

});
var win1 = new Ext.Window({
width: 350,
id: 'win1',
itemId: 'win1',
autoShow: false,
autoHeight: true,
closable: false,
resizable: false,
constrain: true,
modal: false,
layout: 'form',
title: 'login',
items: frm1
});
win1.show();
});
</script>
</head>
<body>
<!-- Page rendered in {elapsed_time} seconds -->
</body>
</html>

Armen Orduyan
17 Nov 2010, 5:51 AM
try this style


.ext-ie7 .x-form-text {
margin: 1px 0;
}

paulr88
17 Nov 2010, 8:14 AM
Thanks for the response. This works excellent for the IE7 form problem. Seems obvious now. :) I appreciate you taking the time.


try this style


.ext-ie7 .x-form-text {
margin: 1px 0;
}

paulr88
17 Nov 2010, 9:27 AM
Ok, the problem with the mask in IE8 is that Ext is putting a style="height:0px" in the ext-el-mask div. I had to solve it with the following code (not final). This will only work for Ext.LoadMask applied to body. Please note, when applying a load mask to the body with other components showing it may be necessary to modify the zindex of the ext-el-mask div. I also have not tested this in a variety of UIs.

var m = new Ext.LoadMask(Ext.getBody(),{msg:'loading'});
m.show();
var pItem = Ext.getBody();
var c = pItem.query('div.ext-el-mask');
var c2 = pItem.query('div.ext-el-mask-msg');
var eL = Ext.get(c[0]);
var eL2 = Ext.get(c2[0]);
eL.applyStyles({'z-index':'99998','-moz-opacity':'1.0', 'opacity':'1.0','filter':'alpha(opacity=100)','height':'100%'});
eL2.applyStyles({'z-index':'99999'});