javascript - ExtJS 6.2.1 - 如何更改 Ext.toast() 的 UI？

Question

大家好，感谢您抽出时间!

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

例如，我希望 toast 带有红色边框，以在发生错误时通知用户，在操作成功完成时通知用户，以及所有其他通知的正常主题颜色，例如例子...

您能否指导我找到正确的代码来执行此操作？ 提前致谢!

Answer 1

在 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'
});