Javascript ExtJS 6.2.1-如何更改Ext.toast（）的UI？

大家好，谢谢你们抽出时间

我想知道如何更改ExtJS 6.2.1 Ext.toast（）的UI

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

你能告诉我怎么做的正确代码吗？

---

提前谢谢

Ext.Toast

resp

Ext.toast

基本上是一个Ext.Panel。我的第一个方法是尝试使用

面板ui

mixin创建一个ui。显然，这不起作用。一个可行的解决方案是使用基本CSS类创建Toast实例，例如：

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

Ext.toast({
    html: 'This is an example',
    title: null,
    align: 't',
    ui: 'yellow-toast'
});

然后，定义

.mytoast

css类，例如在

sass/etc/all.scss

中：

.mytoast {
    border: 2px solid red;
}

---

这似乎是可行的，即使感觉有点“不对劲”。

Ext.Toast

resp

Ext.toast

基本上是一个Ext.Panel。我的第一个方法是尝试使用

面板ui

mixin创建一个ui。显然，这不起作用。一个可行的解决方案是使用基本CSS类创建Toast实例，例如：

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

Ext.toast({
    html: 'This is an example',
    title: null,
    align: 't',
    ui: 'yellow-toast'
});

然后，定义

.mytoast

css类，例如在

sass/etc/all.scss

中：

.mytoast {
    border: 2px solid red;
}

---

这似乎是可行的，即使感觉有点“偏离了Ext的方向”。

在ExtJS7上测试。我想它在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，可以像这样使用：

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

Ext.toast({
    html: 'This is an example',
    title: null,
    align: 't',
    ui: 'yellow-toast'
});

---

在ExtJS7上测试。我想它在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，可以像这样使用：

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

Ext.toast({
    html: 'This is an example',
    title: null,
    align: 't',
    ui: 'yellow-toast'
});

---

谢谢你的输入！我从Toast（）改为Toast只是为了让它正确！我会尝试你的建议，我会给你一个输入很快我可以！我试过了，但运气不好！如果我将代码放在sass/etc/all.scss上，错误[ERR]找不到变量：extjs\u panel\u ui\u mix被抛出。。。如果我将文件移动到sass/src/Application.scss，它对toast（或任何其他面板…）没有影响。哦，非常抱歉，错误的文件：将其放入

sass/var/all.scss

。我编辑了上面的代码。嗨，抱歉回复晚了。还是不行！我将代码放在sass/var/all.scss中，甚至在classic/sass/var/all.scss中进行了尝试，异常[ERR]找不到变量：extjs\u panel\u ui\u mix仍然被抛出！你能提供一把简单的小提琴吗？提前谢谢！嗨，事实上，这似乎根本不起作用，对此表示抱歉。见我上面的第二种方法，我编辑了原始答案。此示例在我的设置中有效。感谢您的输入！我从Toast（）改为Toast只是为了让它正确！我会尝试你的建议，我会给你一个输入很快我可以！我试过了，但运气不好！如果我将代码放在sass/etc/all.scss上，错误[ERR]找不到变量：extjs\u panel\u ui\u mix被抛出。。。如果我将文件移动到sass/src/Application.scss，它对toast（或任何其他面板…）没有影响。哦，非常抱歉，错误的文件：将其放入

sass/var/all.scss

。我编辑了上面的代码。嗨，抱歉回复晚了。还是不行！我将代码放在sass/var/all.scss中，甚至在classic/sass/var/all.scss中进行了尝试，异常[ERR]找不到变量：extjs\u panel\u ui\u mix仍然被抛出！你能提供一把简单的小提琴吗？提前谢谢！嗨，事实上，这似乎根本不起作用，对此表示抱歉。见我上面的第二种方法，我编辑了原始答案。这个例子在我的设置中有效。