Customizing Default Tools icon in ExtJS 5 – by Arindam

How to create a Custom Tool in ExtJS 5 Panel. By default there are some types available for Tools. But a user defined type can be provided. In that case a cross icon appears on the tool icon. This can be replaced with a user specific icon.

Code with Panel Example:

Ext.create('Ext.panel.Panel', {
bodyPadding: 5, 
width: 300,
title: 'Custom Tool',
items: [{
xtype: 'datefield',
fieldLabel: 'DOB'
}, {
xtype: 'textfield',
fieldLabel: 'Name'
tools: [{
tooltip: 'Custom Message',
type: 'CustomToolType',
callback: function() {"","_blank");
renderTo: Ext.getBody()

A custom tool tip, type and name can be given.

Now the class has to be provided in your css file.

.component-tool-help .x-tool-help{

opacity:1; /* this is important */

//note that the class name given should be there along with .x-tool-help

If still you see the cross icon appear below your custom icon, then put the below css also in the file.

.x-tool {

Happy Coding 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s