怎样修改Ext.Element对象的样式

      修改Ext.Element对象的样式，应该说是Web GUI开发的时候常见的一个问题。譬如说设置 textfield 的背景色等等。如下面这段代码：

items : [{ xtype : 'label', text : 'Logicform', width : 135, x : 30, y : 30 }, { xtype : 'textfield', id : 'logicformField', readOnly : true, style : 'background:lightgray', x : 130, y : 30, width : 400 }]

 

      这一句： style: 'background:lightgray',意思是设置一个“textfield” 对象的样式中的背景色为浅灰色。这样写在IE8，Firefox，Chrome里面运行都是没有错的。不幸的是这个世界上有很多人还在执着地使用着微软早期的浏览器。而你的这段脚本程序，运行在IE6，IE7下面时，就会报出这样的脚本错误：“Invalid property value”。 这是因为IE6和IE7 的style 中关于颜色的赋值一定要写成 #??????的形式，否则会当作非法的属性值，而不能解析。比如例子里的lightgray就最好写成 #D3D3D3：

style : 'background:#D3D3D3',

     关于颜色的格式，网上到处都是，如果需要查找，google一下就可以了。这里就不详细说了。

     下面的一个话题：动态的改变style。

      style是一个HTML 中 dom 对象的属性，以前没有Extjs，没有jQuery的时候，写javascript改变style，就是这样写的：

document.getElementById('componentID').style.background = "#D3D3D3";

      注意了，这里getElementById()取回的是一个dom对象，而Ext.getCmp()，或者Ext.ComponentMgr.get()，Ext.get()都是取回一个Ext.Element对象。这两者是不一样的东西。这个Ext.Element对象是Extjs框架将dom对象重新封装过的。所以我们要取回最初的那个dom对象，必须剥去它的Extjs外皮。你可以通过如下调用方法取回它的dom对象：

var componentDom = Ext.getCmp('ComponentID').getEl().dom;

      这句看上去罗嗦了点，那么最后我推荐一个简洁明快的方法：

var componentDom = Ext.getDom('componentID');