Как поместить текст и кликабельные значки в заголовок Ext.Panel?

Question

Я хотел бы поместить текст и кликабельные значки в заголовки на своих панелях, например:

Я нашел несколько старых хаков 2008 года, чтобы сделать это ,но можно представить, что в более новых версиях ExtJS можно размещать текст и значки в заголовках панелей более простым способом.

Какой самый простой способ поместить текст и интерактивные значки вЗаголовок Ext.Panel?

Приложение

спасибо @Stefan, который работал, вот мое решение:

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

Возможно, вы можете использовать опцию конфигурации headerCfg 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" />' }
    ]
},
...

В событие afterrender необходимо добавить интерактивное поведение, например:

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

Вам понадобится немного CSS для стиля заголовка, конечно ...

Answer 2

Еще проще, кажется, просто вставить html в тег заголовка.

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

После мучительного поиска обходного пути autoEl и заголовка это работает, по крайней мере, для 2.2.