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

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

我已经看过文档，也做了一个很好的搜索，但似乎没有回答我的问题。

来源

2012-07-10 user1415459

你的工具指定自定义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 px

来源

2012-07-10 23:48:32

嗨Russ ....感谢您的及时回复。我理解这个逻辑。但是，我不清楚我到底需要定义新类吗？这应该是我的项目还是在extjs库中的某个地方？如果在图书馆里，在哪里？我可以把它放在一个自定义的CSS文件中并运行我的项目吗？ – user1415459 2012-07-11 19:08:28

因此，我添加了该类型并创建了一个特定于该项目的css文件。在css文件中，我定义了两个类。我还更改了sass文件_tabs.scss中的图像尺寸。这使得“十字”按钮消失，但自定义图像仍然没有显示在他们的位置。 “图像”是放置自定义图像的文件夹，此文件夹存在于项目中。我哪里错了？ – user1415459 2012-07-11 21:22:57

我会离开ext CSS和SASS，只需在ext-all.css中包含一个自定义样式表，您可以在其中定义自己的CSS覆盖。如果您在加载图像时遇到问题，请在萤火虫或镀铬中检查工具元素，您可以更改背景图像属性以找到图像的正确路径。 – 2012-07-11 21:47:11

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

回答

相关问题