原文链接: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'
}