Display custom images in the "tools" configuration settings for ext.grid.panel

Question

I am only a month with extjs and still experimenting. My question is: I have a grid panel and inside it the "tools" configuration options. I use this to enable / disable the Ext.grid.feature.Grouping variable. 2 handler functions have logic for disabling / enabling two types by clicking on the "cross" buttons that appear on the right side of the header. The logic is fine. However, I would like to display a set of custom images instead of the cross buttons. It can be done? If so, how? Do I need to make some changes to css code?

I looked through the documentation and also did a good search, but did not answer my question.

Answer 1

Specify custom type settings for your tools:

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

Then define the following classes in the stylesheet to create new tools:

 .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'); } 

Tool image size should be 15 x 15 px