ExtJs IconCls 在工具栏中不起作用答案

【问题标题】：ExtJs IconCls not working in ToolBarExtJs IconCls 在工具栏中不起作用
【发布时间】：2011-10-31 12:04:11
【问题描述】：

gridPanel 的工具栏上没有显示图标 - 仅显示文本。

是否有我应该使用的特定 css 类？我尝试使用 button.print 和 .print 但都不起作用。

,tbar: [
{
     text   : 'Print',
     iconCls: 'print',
     handler: function() {
         Ext.ux.Printer.BaseRenderer.prototype.stylesheetPath = 'css/DETR_WEB.print.css';
         var grid = Ext.getCmp("outstandingGrid");
         alert(grid.title);
         Ext.ux.Printer.print(grid);
    }
}]

.print{
    background-image: url(../images/print.png);
    background-repeat: no-repeat; 
}

【问题讨论】：

您是否检查过按钮上设置了哪些 css 属性，例如。使用 FireBug 或类似软件？
有 x-toolbar-cell 和 x-btn-bml 但是当我应用它们时，它会为图标添加空间，而不是实际图标。我删除了背景重复 css 属性，但没有效果
检查您的风格没有被其他风格优先考虑。如果是这种情况，请尝试更改为background-image: url(../images/print.png) !important;。

标签： css extjs grid icons toolbar

【解决方案1】：

我曾经遇到过同样的问题，我发现 Ext 中的一种样式覆盖了我的图像。所以在处理工具栏时，我总是将!important 添加到background-image：

background-image: url(../images/print.png) !important;

我已添加此答案以澄清问题已通过似乎有助于 OP 的解决方案得到解答。

【讨论】：

【解决方案2】：

在指定带有背景图像的 iconCls 时，我遇到了同样的问题，该图像出现在第一级菜单项中，但没有出现在子菜单项中。我确认在 background-iamge 定义之后添加 !important 解决了这个问题。

【讨论】：