Question

我有一个按钮的监听器，可以像这样创建并将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);
}

css资源如下所示：

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

我的问题是css属性不会被应用，除非我对每个属性添加！important，我读到这是非常糟糕的做法。我还做的是浏览元素标记，当它在浏览器中创建时，我认为它将起作用：

.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的新手并且不知道这些课程是如何工作的，所以即使你不能提供答案，我也会感激你的资源。我自己找不到一个。

Answer 1

一种选择是为您的“成功”工具提示定义自己的用户界面。你可以使用the documentation中的参数在SASS文件中定义你的UI，然后不是给你的组件一个cls，给它一个ui：

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

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

1 个答案: