View Full Version : Custom tool in panel header with image + text

3 Jul 2012, 10:05 PM
Hello guys,

I wanted to know with ExtJS 4 is it possible to create a custom tool in the panel header which has some text in it?

With ExtJS 3.2, we used the panel's tool configuration and provided it with a template and this just worked fine. With ExtJS 4, this does not seem to work. Our requirement is that the panel header shows a tool with text + image and both of which are data dependent.

Thanks in advance!

3 Jul 2012, 10:38 PM
How about you put an html image in the panel header title?

title: "Text" + "<img border='0' src='/extjs/resources/themes/images/default/grid/refresh.gif' />"

you may use the setTitle method to change the text and image:

panel.setTitle('new text and image');

3 Jul 2012, 10:55 PM
Thanks Farish, but I need a add an handler when the user clicks on the image and the text.

I have attached an image of the requirement. So when the user clicks on 'Suppress' and the associated icon the message needs to be suppressed by the handler function.

4 Jul 2012, 2:44 AM
Try this:

.x-tool-mytool {
background-image: url(icon image) !important;


tools: [
type: 'mytool',
width: 'auto',
renderTpl: [
'<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>',
'&nbsp;Custom tool text&nbsp;'
handler: function () {

4 Jul 2012, 4:26 AM
Hi skk,

Sounds like you want to do something on panel header text click, try this

title: "<a style='cursor:pointer;' onclick=alert('hi')><img src='// your image path'/>Testing for Click</a>",

2 Sep 2014, 4:22 AM
Is it supporting in ExtJs 5.0?I have used the above but only image is displayed; somehow the text is hidden.Any solutions?

1 Dec 2014, 12:58 PM
I'm trying to do this (i.e. use a custom tool image, not an img tag) in Architect, but it won't allow me to use a custom type for the tool. Is there something else that has to be done?