Javascript 将css资源添加到ExtJS中的QuickTip不显示

我有一个按钮的侦听器，该按钮创建并向该按钮附加一个QuickTip，如下所示：

onSomeButtonClick: function (button, e, eOpts) {
    var flag = foo();
    if (flag) {
        var tip = Ext.create('Ext.tip.QuickTip', {
        hideDelay: 2000,
        header: false,
        cls: 'successTip' 
    });

    tip.update('Saved');
    tip.showBy(button);
}    

.successTip 
{
    border-style: solid;
    border-width: 3px;
    border-color: #9EE853;
    background-color: #D6FFD6;
}

css资源如下所示：

onSomeButtonClick: function (button, e, eOpts) {
    var flag = foo();
    if (flag) {
        var tip = Ext.create('Ext.tip.QuickTip', {
        hideDelay: 2000,
        header: false,
        cls: 'successTip' 
    });

    tip.update('Saved');
    tip.showBy(button);
}    

.successTip 
{
    border-style: solid;
    border-width: 3px;
    border-color: #9EE853;
    background-color: #D6FFD6;
}

我的问题是，除非我添加css属性，否则不会应用css属性！重要的是，我读到的每个属性都是一个非常糟糕的做法。我还做了一件事，就是在浏览器中创建元素标记时浏览该元素标记，我认为会起作用的是：

.successTip .x-tip-default 
{
    border-style: solid;
    border-width: 3px;
    border-color: #9EE853;
    background-color: #D6FFD6;
}  

我几乎可以肯定，它必须处理这些css类，比如.x-tip-default，但无法使其正常工作。以下是零部件在浏览器中的表示形式：

<div class="x-tip successTip x-layer x-tip-default x-border-box" id="quicktip-1282" style="width: 114px; height: 33px; right: auto; left: 170px; top: 105px; z-index: 19000; display: none;">
    <div id="quicktip-1282-body" data-ref="body" class="x-tip-body x-tip-body-default x-tip-body-default x-noborder-trbl" role="presentation" style="width: 104px; height: 23px; left: 0px; top: 0px;">
        <div id="quicktip-1282-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation">
                <div id="quicktip-1282-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation">Properties saved</div>
        </div>
    </div>
    <div role="presentation" class="x-tip-anchor x-tip-anchor-top" id="ext-element-75" style="visibility: hidden;"></div>
</div>    

保存的属性

---

编辑：我是css新手，不知道这些类是如何工作的，所以即使您不能提供答案，我也非常感谢您提供的相关资源。我自己找不到

一个选项是为“成功”工具提示定义自己的UI。您可以使用来自的参数在SASS文件中定义UI，然后为组件提供一个UI，而不是cls：

var tip = Ext.create('Ext.tip.QuickTip', {
    hideDelay: 2000,
    header: false,
    ui: 'success-ui'
});

---

感谢您的回复，非常感谢！只是一个问题-定义自定义UI不会干扰我正在使用的主题，对吗？只有在组件中引用它时才会使用它（如上所述）。简单地定义它不会改变你的主题。