css - 在 ExtJs 按钮上添加图标

Question

我正在使用 ExtJs 6.0.1

我添加了一个按钮并使用 css 在按钮上设置图标，如下所示

.button_merge_style {
    content: url(http://localhost:3545/ServiceHealthApp/HealthIcons/ServHL.png);
}

这工作正常，但如您所见，我已经使用本地路径来获取在我的主应用程序中的文件夹 ServiceHealthApp/HealthIcons 中转储的图标

有什么办法可以将此路径更改为根应用程序路径，例如

url(../ServiceHealthApp/HealthIcons/ServHL.png)

有什么帮助吗？

Answer 1

url('/ServiceHealthApp/HealthIcons/ServHL.png')

如果/ServiceHealthApp在根文件夹中。

Answer 2

我认为最好的做法是将图像转储到应用程序的资源文件夹中，同时保持 Ext 的资源路径约定。

如果要设置按钮样式，请将图标放入<appRoot>/resources/images/button并使用 SASS 为您解析路径。

// <appRoot>/sass/src/button/Button.scss

$imgResourcePath: get_resource_path('images');

.#{$prefix}btn-icon-el.button_merge_style {
    background: url($imgResourcePath + '/button/ServHL.png') no-repeat center center !important;
}

还要确保你的 SASS 命名空间设置正确app.json。

希望这有所帮助！:-)