ExtJS 6 的一些 样式类配置项

原文链接：https://blog.csdn.net/lovelyelfpop/article/details/78878842

样式类配置项有下面 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'
}