How to replace the default Cross icon for Custom Tools in ExtJS 5 (user defined Tools)

Hi,

By Default in ExtJS 5 The tools will have a cross symbol if you define a custom type:

tools: [{
type: 'help',
callback: function() {
// show help here
}
}]

But if you want to create a custom tool say “customToolType” with any icon this is how you can do it.

code in extJS: (giving example with a Panel)

Ext.create('Ext.panel.Panel',{
title:'General',
bodyPadding: 5,
items:[
{
xtype: 'textfield',
fieldLabel:'Field'
},
{
xtype: 'datefield',
fieldLabel: 'Start date'
}
],
tools: [{
tooltip: 'Any ToolTip',
tooltipType:'qtip',
type: 'CustomToolType',
cls:'component-tool-help',
callback: function() {
window.open("http://docs.sencha.com/extjs/5.0/5.0.1-apidocs","_blank");
}
}],
renderTo:Ext.getBody()
});

Note the type is “CustomToolType” and cls is “component-tool-help”.

You need to add this class in your css for your icon :

.component-tool-help .x-tool-help{
background-image:url('urlpathofimage.png');
opacity:1; /* required */
}

If still you see the cross icon is appearing add this class:

.x-tool {
background-image:none;
}

That’s it. Your icon will appear with your tooltip at the Title bar.

Happy Coding 🙂

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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