修改Ext.Element对象的样式,应该说是Web GUI开发的时候常见的一个问题。譬如说设置 textfield 的背景色等等。如下面这段代码:
这一句: style: 'background:lightgray',意思是设置一个“textfield” 对象的样式中的背景色为浅灰色。这样写在IE8,Firefox,Chrome里面运行都是没有错的。不幸的是这个世界上有很多人还在执着地使用着微软早期的浏览器。而你的这段脚本程序,运行在IE6,IE7下面时,就会报出这样的脚本错误:“Invalid property value”。 这是因为IE6和IE7 的style 中关于颜色的赋值一定要写成 #??????的形式,否则会当作非法的属性值,而不能解析。比如例子里的lightgray就最好写成 #D3D3D3:
关于颜色的格式,网上到处都是,如果需要查找,google一下就可以了。这里就不详细说了。
下面的一个话题:动态的改变style。
style是一个HTML 中 dom 对象的属性,以前没有Extjs,没有jQuery的时候,写javascript改变style,就是这样写的:
注意了,这里getElementById()取回的是一个dom对象,而Ext.getCmp(),或者Ext.ComponentMgr.get(),Ext.get()都是取回一个Ext.Element对象。这两者是不一样的东西。这个Ext.Element对象是Extjs框架将dom对象重新封装过的。所以我们要取回最初的那个dom对象,必须剥去它的Extjs外皮。你可以通过如下调用方法取回它的dom对象:
这句看上去罗嗦了点,那么最后我推荐一个简洁明快的方法: