在 ext.grid.panel 的“工具”配置选项中显示自定义图像答案

【问题标题】：Displaying Custom Images in 'tools' config options of ext.grid.panel在 ext.grid.panel 的“工具”配置选项中显示自定义图像
【发布时间】：2012-07-10 08:51:49
【问题描述】：

我只有一个月大的 extjs 并且仍在试验。我的问题是：我有一个网格面板，其中包含“工具”配置选项。我正在使用它来启用/禁用 Ext.grid.feature.Grouping 变量。 2 个处理函数具有通过单击出现在标题右侧的 2 个“交叉”按钮来禁用/启用 2 个视图的逻辑。逻辑很好。但是，我想显示我的一组自定义图像来代替“十字”按钮。这可以做到吗？如果是，如何？我需要为此对css代码进行一些更改吗？

我查看了文档并进行了很好的搜索，但似乎没有任何问题可以回答我的问题。

【问题讨论】：

标签： extjs4 panel

【解决方案1】：

在您的工具上指定自定义 type 配置：

Ext.create('Ext.grid.Panel', {
   ...
   tools: [
      {
         type: 'enable-grouping',
         handler: function() {
            ...
         }
      },
      {
         type: 'disable-grouping',
         handler: function() {
            ...
         } 
      }
   ]
});

然后在样式表中定义以下类来设置新工具的样式：

.x-tool-enable-grouping {
   background-image: url('path/to/tool/image/enable-grouping.png');
}

.x-tool-disable-grouping {
   background-image: url('path/to/tool/image/disable-grouping.png');
}

工具图像的大小应为 15 x 15 像素

【讨论】：

嗨 Russ.... 感谢您的及时回复。我明白其中的逻辑。但是，我不清楚我到底需要在哪里定义新类？那应该是我的项目还是 extjs 库中的某个地方？如果在图书馆，在哪里？我可以将它放在自定义 CSS 文件中并运行我的项目吗？
所以，我添加了类型并创建了一个特定于项目的 css 文件。在 css 文件中，我定义了这两个类。我还更改了 sass 文件 _tabs.scss 中的图像尺寸。这使得“十字”按钮消失，但自定义图像仍然没有显示在它们的位置。 “图像”是我放置自定义图像的文件夹，该文件夹存在于项目中。我哪里错了？
我将不理会 ext CSS 和 SASS，只在 ext-all.css 之后包含一个自定义样式表，您可以在其中定义自己的 CSS 覆盖。如果您在加载图像时遇到问题，请检查 firebug 或 chrome 中的工具元素，您可以更改 background-image 属性以找到图像的正确路径。
只需像这样使用 !important .x-tool-disable-grouping { background-image: url('path/to/tool/image/disable-grouping.png') !important; }