默认的css样式就不要改了,你可以自定义一些css样式,然后用如下类似代买,可以控制
field的新样式
// 机台不同状态设置不同的背景色if (eqptState == "EQPT_STATE_DOWN") {
Ext.getCmp('eqptState_' + pI).fieldClass = 'my-form-field-red'
} else if (eqptState == "EQPT_STATE_IDLE") {
Ext.getCmp('eqptState_' + pI).fieldClass = 'my-form-field-yellow'
} else if (eqptState == "EQPT_STATE_RUN") {
Ext.getCmp('eqptState_' + pI).fieldClass = 'my-form-field-green'
} else if (eqptState == "EQPT_STATE_NG") {
Ext.getCmp('eqptState_' + pI).fieldClass = 'my-form-field-violet'
} else {
Ext.getCmp('eqptState_' + pI).fieldClass = ''
}
以下都是配置属性,以3.4版本为标准css部分:
clearCls //清除自带样式
cls //一个可选添加的CSS样式类,加入到组件的元素上
ctCls //一个可选添加的CSS样式类,加入到组件的容器上
disabledClass //当组件被禁用时作用的CSS样式类
itemCls //关于容器的表单项元素的额外的CSS样式
overCls //关于鼠标上移至该组件元素的CSS样式类,移出时撤销该样式的效果
style部分:
style //作用在组件元素上特定的样式
labelStyle //关于表单字段的label提示文本的CSS样式的“完全表达式
extjs4.0需要的引用的文件:<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"><script type="text/javascript" src="ext/bootstrap.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/locale/ext-lang-zh_CN.js"></script>
其中 ext-base.js 被bootstrap.js代替。
不要随意调整各文件的顺序,特别是ext-base.js必须在ext-all.js文件之前(extjs 4.0中不知道还需要注意不)