javascript – 如何在Ext.Panel标题中放置文本和可点击的图标？

我想在我的面板的标题中放置文本和可点击的图标,如下所示：

我发现了一些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" />' },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;
}

解决方法

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

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

必须在afterrender事件中添加可单击行为,例如：

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

当然,你需要一些CSS来标题标题…

javascript – 如何在Ext.Panel标题中放置文本和可点击的图标？

解决方法

猜你在找的JavaScript相关文章