Ext中的样式控制

Ext的样式库：

Ext 提供了一系列的样式，包括claasic,neptune,gray等等，这些都可以直接引用样式库得到。Ext默认为classic的样式库。现在我更喜欢平面化的样式，所以neptune更适合。

<link rel="stylesheet" type="text/css" href="../ext/resources/ext-theme-neptune/ext-theme-neptune-all.css"/>

或者可以通过下拉框来配置样式库的路径，从而达到配置整个系统样式的目的

自定义样式：对于一些控件，也许我们有自己的样式要求，就需要在Ext的控件中自定义样式了。自定义样式有以下几种方式：

1. 在Ext.Component中定义了Style的属性，因此可以对该属性赋值从而对该控件的对应样式进行修改：

style: {
        color: '#FFFFFF',
        backgroundColor:'#000000'
    },

2. 在Ext.Component中定义了baseCls以及cls属性，该属性定义了该控件的类名。通过设置类型，在样式表中添加该类的样式库，达到对控件样式的修改

baseCls是控件的基本类名，cls为可扩展类名

如：

baseCls:'header',
cls:'subHeader'

Ext 最后声称的html中就会是(以Panel为例)

<div class="header subHeader">...</div>

在样式表中定义

.header {
        color: '#FFFFFF';
        backgroundColor:'#000000'
}

3. 重写Ext的样式表，影响是之后所引用到的该组件的样式均会被改变

前提：FireFox浏览器

1. 右键点击你所需要改的控件，选择使用firefox查看该控件元素，

在firefox的右下角会列出该元素的样式表，

2. 把所要修改的样式靠到你自定义的样式表中，名字不变，内容修改为你想定义的样式就可以了。