How to put text and interactive icons in the Ext.Panel header?

Question

I would like to put text and interactive icons in the headings in my panels, for example:

I found some old hacks from 2008 to do this , but I can imagine that newer versions of ExtJS allow you to place text and icons in panel headers in a simpler way.

What is the easiest way to place text and interactive icons in an Ext.Panel header?

Adding

thanks @Stefan that worked, here is my solution:

JavaScript:

var grid_shopping_cart = new Ext.grid.GridPanel({ headerCfg: { tag: 'div', cls: 'x-panel-header', children: [ { tag: 'div', cls: 'panel_header_main', 'html': 'Shopping Cart' }, { tag: 'div', cls: 'panel_header_icon1', 'html': '<img src="images/icon_plus.png" />' }, { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' } ] }, width: 600, height: 390, ... listeners: { 'afterrender' : function(p) { p.header.on('click', function(e, h) { alert('you clicked the plus'); }, p, { delegate: '.panel_header_icon1', stopEvent: true }); }, ... 

CSS

 div.panel_header_main { text-align: left; float: left; } div.panel_header_extra { text-align: left; float: right; margin-right: 10px; } div.panel_header_icon1 { text-align: right; float: right; margin-left: 3px; cursor: hand; cursor: pointer; } div.panel_header_icon2 { text-align: right; float: right; margin-left: 3px; cursor: hand; cursor: pointer; } 

Answer 1

Perhaps you can use the headerCfg configuration headerCfg for Ext.Panel :

 ..., headerCfg: { tag: 'div', cls: 'x-panel-header', children: [ { tag: 'div', cls: 'my-title', 'html': 'Shopping Cart' }, { tag: 'div', cls: 'my-status', 'html': 'Status: on <img src="status.png" />' } ] }, ... 

In the afterrender event, afterrender can add behavior that can be clicked:

 function(p) { p.header.on('click', function(e, h) { }, p, { delegate: '.my-status', stopEvent: true }); } 

You will need css for the correct header style ...

Answer 2

Even simpler, apparently just patting the html into the title tag.

 title: '<span style="cursor:help" title="' + strTitle + '">' + strTitle + '</span>', 

After a painful search for the autoEl bypass method and header, this works, at least on 2.2.