ExtJS 6 的一些 样式类配置项

样式类配置项有下面 4 种：

baseCls、classCls、cls、userCls

它们有不同的使用场合。

定义类时使用(Ext.define)

即 定义控件类时，代表了 控件类 独有的一种特征

baseCls

取名一般是 x-xtype， 比如

x-button

如果没有设置，则取 classCls，如果 classCls 也没设置，则一般默认为 x-xtype

只在类定义时使用，不能动态 setBaseCls

和ui相关

比如 button 的

baseCls: 'x-button'

，如果设置 ui 为 action，则会生成一个样式类

x-button-action

classCls

子类的 classCls 会和父类的 classCls 累加

比如 container 的

classCls: 'x-container'

, toolbar 的

classCls: 'x-toolbar'

，

因为 toolbar 继承自 container，所以最后 toolbar 的dom元素上会有

class="x-container x-toolbar"

再比如 dialog 会有

x-container x-panel x-dialog

, 就是因为 dialog 继承自 panel，而 panel 又继承自 container

cls

既可以定义类时使用，也可以实例化时使用(见下面)

与具体的控件类型无关

如果要给控件类设置个样式，但是又与具体的控件类型无关，则可以用 cls

比如 我要设置 container 的背景色是灰色，那就先定义 css

.bg-gray { background-color: gray }

，然后给 container 配置

cls: 'bg-gray'

再比如 某个

Ext.define('MyApp.view.UserGrid', {
extend: 'Ext.grid.Grid',

cls: 'has-border'
});

.has-border {
border: solid 1px #dfdfdf;
}

实例化时使用

即 使用控件时

cls

{
xtype: 'grid',
cls: 'has-border'
}

.has-border {
border: solid 1px #dfdfdf;
}

userCls

{
xtype: 'grid',
userCls: 'has-border'
}