Extjs如何用语句获得控件的默认css并修改其中的属性,如numberfield的默认样式是

html-css021

Extjs如何用语句获得控件的默认css并修改其中的属性,如numberfield的默认样式是,第1张

默认的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中不知道还需要注意不)