extjs中的label的Css样式怎么弄

html-css013

extjs中的label的Css样式怎么弄,第1张

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

css部分:

clearCls //清除自带样式

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

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

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

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

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

style部分:

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

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

你可以用浏览器的开发人员工具查看ExtJS生成的html代码，这样你就会发现，你在cls中配置的字符串，被添加到了对应html元素的class中。所以，使用cls，你要自定义一个类选择器的css，然后再cls中写类名。看下面的例子。

<body>

<style type="text/css">

    .myCls{

        color: red

    }

</style>

<script type="text/javascript">

    Ext.create('Ext.panel.Panel',{

        items:[

            {

                xtype:'label',

                text:'这里的文字是红色',

                cls:'myCls'

            }

        ],

        renderTo:Ext.getBody()

    })

</script>

</body>

自定义的css文件

（注意

不是样式）

需要被页面引用

extjs的代码只不过是把名为invalidclass

的值付给

field对应dom元素的

class属性至于效果能不能出来

要看这个页面是否能在你加载的各个css文件中找到对应的class