Ext core 3.1.0(下载地址 )中Ext.DomHelper中的applyStyles方法源码如下:
applyStyles : function(el, styles){ if(styles){ var i = 0, len, style; el = Ext.fly(el); if(Ext.isFunction(styles)){ styles = styles.call(); } if(Ext.isString(styles)){ styles = styles.trim().split(/\s*(?::|;)\s*/); for(len = styles.length; i < len;){ el.setStyle(styles[i++], styles[i++]); } }else if (Ext.isObject(styles)){ el.setStyle(styles); } } },
该方法中这句
styles = styles.trim().split(/\s*(?::|;)\s*/);
直接使用字符串类的trim方法,该方法是在ECMA-262(V5) 中给String.prototype上添加的(见15.5.4.20),用来去除字符串两旁的空白字符。
各浏览器的最新版本都已支持如IE9、Firefox3、Chrome8、Safari4和Opera10。
但IE6/7/8仍然不支持。导致在IE6/7/8中applyStyles失效,进而影响到Ext.Element的set方法。
测试如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ext.DomHelper.applyStyles方法在IE6/7/8下失效</title>
<script src="ext-core-debug.js"></script>
</head>
<body>
<p id="p1">HELLO</p>
<script type="text/javascript">
var dh = Ext.DomHelper;
var p1 = document.getElementById('p1');
try{
dh.applyStyles(p1,'color:red');
}catch(e){
alert(e);
}
</script>
</body>
</html>
这个页面引入了ext-core-debug.js,使用Ext.DomHelper对象的applyStyles方法来设置元素样式。
在IE6/7/8中有异常,段落颜色未变。其它浏览器段落p的颜色变成了红色。
这是一个大Bug!