¿Cómo poner texto y hacer clic en iconos en un encabezado de Ext.Panel?

Question

me gustaría poner los iconos de texto y se puede hacer clic en los encabezados de mis paneles, así:

que he encontrado algunos old hacks from 2008 to do this, pero puedo imaginar que las nuevas versiones de ExtJS le permiten poner texto e iconos en los encabezados de panel de una manera más directa.

¿Cuál es la forma más directa de poner texto y hacer clic en iconos en un encabezado de Ext.Panel?

Adición

gracias @Stefan que funcionaba, aquí está mi solución:

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

Tal vez se puede utilizar la opción de configuración de la headerCfgExt.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" />' } 
    ] 
}, 
... 

El comportamiento se puede hacer clic hay que añadir en caso afterrender por ejemplo:

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

usted necesitará un poco CSS para diseñar el encabezado, por supuesto ...

Answer 2

Parece incluso más sencillo simplemente colocando html en la etiqueta del título.

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

Después de buscar penosamente un autoEl y solución de encabezado, esto funciona, al menos en 2.2.