樣式類配置項有下面 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 1
 
px #dfdfdf;
}

例項化時使用

即 使用控制元件時

cls

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

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

userCls

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