Extjs4 在'中显示自定义图像;工具';ext.grid.panel的配置选项

Extjs4 在'中显示自定义图像;工具';ext.grid.panel的配置选项,extjs4,panel,Extjs4,Panel,我只有一个月大,还在使用extjs进行实验。我的问题是:我有一个网格面板,其中有“工具”配置选项。我使用它来启用/禁用Ext.grid.feature.Grouping变量。这两个处理函数具有通过单击标题右侧显示的两个“交叉”按钮来禁用/启用这两个视图的逻辑。逻辑是正确的。但是,我想显示我的一组自定义图像来代替“交叉”按钮。这能做到吗?如果是,如何进行?我需要在css代码中做一些更改吗 我已经查看了文档,也做了很好的搜索,但似乎没有什么能回答我的问题 在工具上指定自定义配置: Ext.creat

我只有一个月大,还在使用extjs进行实验。我的问题是:我有一个网格面板,其中有“工具”配置选项。我使用它来启用/禁用Ext.grid.feature.Grouping变量。这两个处理函数具有通过单击标题右侧显示的两个“交叉”按钮来禁用/启用这两个视图的逻辑。逻辑是正确的。但是,我想显示我的一组自定义图像来代替“交叉”按钮。这能做到吗?如果是,如何进行?我需要在css代码中做一些更改吗

我已经查看了文档,也做了很好的搜索,但似乎没有什么能回答我的问题

在工具上指定自定义配置:

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 px

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