1

大家好，感谢您的宝贵时间！

我想知道如何更改 ExtJS 6.2.1 Ext.toast() 的 UI ...

例如，我想要带有红色（ish）边框的祝酒词，以在发生错误时通知用户，并在操作成功完成时使用绿色（ish），以及所有其他通知的正常主题颜色，例如.. .

您能否指导我找到有关如何执行此操作的正确代码？提前致谢！

4

2 回答 2

2

在 ExtJS 7 上测试。我猜它也适用于 6。

创建一个覆盖 scss 文件：

/packages/local/yourtheme/sass/src/window/Toast.scss

里面：

$toast-red-color: #ffe0db;
$toast-yellow-color: #fff8d2;
$toast-green-color: #efffd2;
$toast-font-weight: 600;

// Red
@include extjs-window-ui(
    $ui: 'red-toast',
    $ui-header-background-color: $toast-red-color,
    $ui-border-color: $toast-red-color,
    $ui-header-border-color: $toast-red-color,
    $ui-body-border-color: $toast-red-color,
    $ui-body-background-color: $toast-red-color,
    $ui-body-font-weight: $toast-font-weight,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: $toast-red-color
);

// Green
@include extjs-window-ui(
    $ui: 'green-toast',
    $ui-header-background-color: $toast-green-color,
    $ui-border-color: $toast-green-color,
    $ui-header-border-color: $toast-green-color,
    $ui-body-border-color: $toast-green-color,
    $ui-body-background-color: $toast-green-color,
    $ui-body-font-weight: $toast-font-weight,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: $toast-green-color
);

// Yellow
@include extjs-window-ui(
    $ui: 'yellow-toast',
    $ui-header-background-color: $toast-yellow-color,
    $ui-border-color: $toast-yellow-color,
    $ui-header-border-color: $toast-yellow-color,
    $ui-body-border-color: $toast-yellow-color,
    $ui-body-background-color: $toast-yellow-color,
    $ui-body-font-weight: $toast-font-weight,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: $toast-yellow-color
);

/* Global changes */
.#{$prefix}toast {
    @include box-shadow(rgba(0,0,0,0.0) 0 0px 0px);

    .x-window-body-default {
         // More specific changes, if needed
    }

    .x-autocontainer-outerCt {
        // More specific changes, if needed
    }
}

在这种情况下，您将拥有 3 个可以像这样使用的 ui：

Ext.toast({
    html: 'This is an example',
    title: null,
    align: 't',
    ui: 'yellow-toast'
});
于 2021-06-06T23:06:08.563 回答
0

Ext.Toast分别 Ext.toast基本上是一个Ext.Panel。我的第一种方法是尝试使用panel-uimixin 创建一个 ui。显然，这不起作用。一个可行的解决方案是创建一个带有基本 CSS 类的 Toast 实例，例如：

var t = Ext.create('Ext.Toast',{cls: 'mytoast',timeout: 2000});
t.show({message: 'foo'});

然后，定义.mytoastcss 类，例如sass/etc/all.scss：

.mytoast {
    border: 2px solid red;
}

这似乎有效，即使感觉有点“偏离 Ext 方式”。

于 2017-05-08T13:25:03.910 回答