Question

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

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

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

如果我使用 iconCls 设置按钮图标，那就可以了。

我想在标签或图片中添加此图标

我试过了：

            xtype: 'label',
            iconCls: 'myCoolLookingIcon '

和

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

但在任何一种情况下似乎都无效。

Answer 1

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

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

试试这个：

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

给予宽度和高度，使其有效。

Answer 2

最终我最终做到了这一点。有点hacky但它有效。

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

将图标添加到Extjs工具栏

2 个答案: