将图标添加到 Extjs 工具栏答案

【问题标题】：Adding icon to Extjs toolbar将图标添加到 Extjs 工具栏
【发布时间】：2014-06-27 12:10:27
【问题描述】：

我正在尝试向我的工具栏添加一个图标（任意 - 与按钮无关）。

在我的 CSS 中，我这样定义 URL：

.myCoolLookingIcon {
    background-image: url('../ext-theme-gray/images/grid/columns.gif');
}

如果我使用 iconCls 为按钮设置图标，那效果很好。

我想要标签或图片中的这个图标

我试过了：

            xtype: 'label',
            iconCls: 'myCoolLookingIcon '

和

            xtype: 'image',
            html: '<img class="myCoolLookingIcon "/>'

但这似乎在任何一种情况下都不起作用。

【问题讨论】：

你不能只是编造配置。标签没有iconCls 配置。

标签： css extjs extjs4.2

【解决方案1】：

这是实现你想要的方式之一（不使用 iconCls）

xtype:'label',
html: '<img src=\"path_to_icon\">'

试试这个：

 xtype:'label',
 html: '<img class="className" width="20" height="20">'

给出宽度和高度，让它工作。

【讨论】：

是的，我看过了。对我来说似乎有点太乱了
啊忘记了我的例子中的宽度和高度 :) 谢谢
第二个建议创建了一个灰色边框，因为没有指定 src。

【解决方案2】：

最终我还是这样做了。有点hacky，但它有效。

{
    xtype: 'label',
    itemId: 'labelWithIcon',
    text: '',
    cls: 'classNameWithImgBackground',
    listeners: {
      render: function () {
        this.setText('<span style="margin-left: 16px;">Label Text</span>', false);
      }
    }
}

【讨论】：