extjs修改css样式的简单介绍

extjs 中怎样修改Ext.Toolbar的背景色

可以设置style也可以设置cls属性即引定义好的CSS样式,为其设置背景图片，或者将背景图片设为空指定背景颜色：

法1：

var toolbar = new Ext.Toolbar({

style: 'background-color:Red; background-image:url();',

renderTo: 'toolbarDiv',

items: [{

text: '测试按钮',

handler: function() { }

}, {

xtype:'label',

text:'测试文字'

}]

});

法2：

var toolbar = new Ext.Toolbar({

cls: "toolbar",

renderTo: 'toolbarDiv',

items: [{

text: '测试按钮',

handler: function() { }

}, {

xtype:'label',

text:'测试文字'

}]

});

设置css样式toolbar:

style type="text/css"

.toolbar{ background-color:Red; background-image:url(); }

/style

相关问答

Q1: extjs中的label的Css样式怎么弄

以下都是配置属性,以3.4版本为标准

css部分:

clearCls //清除自带样式

cls //一个可选添加的CSS样式类，加入到组件的元素上

ctCls //一个可选添加的CSS样式类，加入到组件的容器上

disabledClass //当组件被禁用时作用的CSS样式类

itemCls //关于容器的表单项元素的额外的CSS样式

overCls //关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果

style部分:

style //作用在组件元素上特定的样式

labelStyle //关于表单字段的label提示文本的CSS样式的“完全表达式

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

默认的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 = '';

    }