如何在Ext.Panel头文件中放置文本和可点击的图标？

Question

我想放在标题的文本和图标，可点击我的面板，类似这样的：

，我发现了一些old hacks from 2008 to do this，但可以想像，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

也许你可以使用Ext.Panel的headerCfg配置选项：

..., 
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。