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',
tooltipType:'qtip',
type: 'CustomToolType',
cls:'component-tool-help',
callback: function() {
window.open("http://www.sencha.com/","_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{
background-image:url('/pathto/usericon.png');

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 {
background-image:none;
}

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