Ext 的 IE 兼容问题
短短一个登陆窗口,在IE(6.0)下居然有如此多的问题,但是 firefox下却没问题,ext 如此不兼容 IE,都不敢拿它做企业应用设计了,请高手指教.
问题如下:
1. 一个简单的 Ext.window, 当 collasible 为 true时,在 IE下,点 collasible能收回但是再点就不能恢复原来大小了,而在firefox下却没问题
2. 登陆窗口被鼠标移动了,窗口里的所有控件都不再显示了,而在IE下也没问题
3. 登陆窗口里的两个 inputbox, 在 firebox里上下对的很整齐,看上去很漂亮,可是到IE里就一左一右错开了,看上去很不舒服
4. Ext.form.Formpanel blankText 属性的内容,在firefox 里显示的很好,可是一到IE 里,居然显示的信息飞到IE窗口里的最左上角去了.
这么多问题,里面的button action 还没试呢,试了还不知道有多少问题呢.
代码如下:
Ext.onReady(function(){
Ext.QuickTips.init();
//Define loginForm (not include button)
var loginForm = new Ext.form.FormPanel({
bodyStyle : 'padding-top:6px',
defaultType : 'textfield',
labelAlign : 'left',
labelWidth : 55,
labelPad : 0,
frame : true,
defaults : {
allowBlank : true,
width : 158
},
items : [{
cls : 'user',
id : 'userName',
fieldLabel : 'Username'
blankText : 'UserName must not blank'
}, {
cls : 'key',
id : 'password',
fieldLabel : 'Password',
blankText : 'Password must not blank',
inputType : 'password'
}]
});
//Define action methods
var login = function(){
loginForm.form.submit({
waitMsg:'User is logining...',
url:'',
method:'POST',
success:function(form, action) {
window.location.href ='';
},
failure:function(form,action) {
// reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('Warning:', action.result.errors.msg);
}
});
};
var reset = function() {
loginForm.form.reset();
};
//Define login window
var loginPanel = new Ext.Window({
el:'win',
title:'Ykaddon System',
// closable:false,
width:265,
height:140,
layout:'column',
// draggable:false,
defaults:{
border : false
},
items : {
columnWidth : 1,
items:loginForm
},
buttonAlign : 'center',
buttons:[{
text : 'Login',
handler : login
}, {
text : 'Reset',
handler : reset
}]
});
loginPanel.show();
});
html 如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
help
<div id="win"></div>
</body>
</html>