javascript 如何在 Ext.Panel 标题中放置文本和可点击图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4990057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put text and clickable icons in a Ext.Panel header?
提问by Edward Tanguay
I would like to put text and clickable icons in the headers in my panels, like this:
我想在面板的标题中放置文本和可点击图标，如下所示：
I've found some old hacks from 2008 to do this, but can imagine that the newer versions of ExtJS allow you to put text and icons in panel headers in a more straightforward way.
我发现了一些2008 年的旧黑客来做到这一点，但可以想象，新版本的 ExtJS 允许您以更直接的方式将文本和图标放在面板标题中。
What is the most straight-forward way to put text and clickable icons in a Ext.Panel header?
在 Ext.Panel 标题中放置文本和可点击图标的最直接方法是什么？
Addendum
附录
thanks @Stefan that worked, here's my solution:
感谢@Stefan 有效，这是我的解决方案：
Javascript:
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:
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;
}
采纳答案by Stefan Gehrig
Perhaps you can use the headerCfgconfiguration option of the Ext.Panel:
也许您可以使用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" />' }
]
},
...
The clickable behavior must be added in the afterrenderevent for example:
必须在afterrender事件中添加可点击行为，例如：
function(p) {
p.header.on('click', function(e, h) {
}, p, {
delegate: '.my-status',
stopEvent: true
});
}
You'll need some css to style the header of course...
当然，您需要一些 css 来设置标题的样式...
回答by ruffin
Even more straightforward seems to be just slapping html into the title tag.
更直接的似乎只是将 html 放入标题标签中。
title: '<span style="cursor:help" title="' + strTitle + '">'
+ strTitle + '</span>',
After painfully searching up an autoEl and header workaround, this works, at least on 2.2.
在痛苦地搜索 autoEl 和 header 解决方法之后，这至少在 2.2 上有效。
