PDA

View Full Version : Customize icon on Ext.panel.Tool



ratishsp
15 Jan 2012, 9:30 PM
Hi,
I wish to replace icon on Ext.panel.Tool with a custom icon.
I didnt find any method on Ext.panel.Tool for the same.
On going through the source code of Tool.js, I found the below snippet which paints the image.



renderTpl: ['<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],


When defining my tools config, I replaced the renderTpl to point to the custom icon. Please let me know if the approach taken is fine.



itemId: 'prev',
type: 'prev',
renderTpl: ['<img id="{id}-toolEl" src="http://example.com/abc.jpg" class="{baseCls}-{type}" role="presentation"/>'],
qtip: 'back'


I am using ExtJS 4.0.2

Regards,
Ratish

skirtle
15 Jan 2012, 11:29 PM
If possible you should move the image URL out to a stylesheet. You should be able to add a custom tool type just by using a type value that isn't already defined, then specifying suitable CSS rules to render the image. There shouldn't be any need to change the template.

near
16 Jan 2012, 2:13 AM
Hi,
Also have the same concern, but I am wondering how to apply that suitable CSS rule, I mean on which selector ? does the definition of the custom type automatically define a classe or an identifier with the same name ?

ratishsp
16 Jan 2012, 2:25 AM
It works.

To answer 'near', following worked for me


itemId: 'home',
type: 'home',
cls:'abc-tool-home',
qtip: 'Back to Home'


css


.abc-tool-home .x-tool-home{
background-image:url(abc-home.png);
}

near
16 Jan 2012, 5:29 AM
yeah it works ! thx !

bindu misra
27 Jan 2015, 1:11 AM
which css needs to be changed for adding new icon on header of panel

darjiyogen
10 Jun 2016, 3:43 AM
You just need to add class in your project css.

CSS:

.anyCls .x-tool-home{ background-image:url(yourIcon.png);}

Code:


xtype: 'tool',
type: 'home',
cls: 'anyCls',