Displaying Custom Images in 'tools' config options of ext.grid.panel

Question

I am only a month old with extjs and still experimenting. My question is: I have a grid panel and within it the 'tools' config options. I am using this to enable/disable a Ext.grid.feature.Grouping variable. The 2 handler functions have the logic to disable/enable the 2 views by clicking on the 2 'cross' buttons that appear on the right side of the header. The logic is fine. However, I would like to display my set of custom images in place of the 'cross' buttons. Can this be done? If yes, how? Do I need to make some changes in the css code for that?

I have looked into the documentation and also done a good search but nothing seems to answer my question.

Answer 1

Specify a custom type config on your tools:

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

Then define the following classes in a stylesheet to style your 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');
}

The size of a tool image should be 15 x 15 px