extjs4 - 在 ext.grid.panel 的 'tools' 配置选项中显示自定义图像

Question

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

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

Answer 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 像素