在 ExtJs 按钮上添加图标答案

【问题标题】：Adding Icon on ExtJs button在 ExtJs 按钮上添加图标
【发布时间】：2015-10-30 07:18:22
【问题描述】：

我正在使用 ExtJs 6.0.1

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

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

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

有什么方法可以将此路径更改为根应用程序路径之类的

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

有什么帮助吗？

【问题讨论】：

标签： css button extjs path extjs6

【解决方案1】：

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

如果 /ServiceHealthApp 位于根文件夹中。

【讨论】：

【解决方案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;
}

还要确保在 app.json 中正确设置了 SASS 命名空间。

希望这会有所帮助！ :-)

【讨论】：