ExtJS - 将监听器添加到标题

Question

我有一个小的panel 和title 和body。

var dashboardPanel1 = Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    collapsible: true,
    margin: '0 0 50 0',

    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px',
        border: 0
    },

    title: 'Key settings',

    items: [{
        html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',

    }, {
        html: '|Your key is active|',
    }, {
        html: '|Expiring date: 27.04.2018|',
    }],
});

如何将侦听器附加到 title？

所以，当我点击Key settings时，会执行一些操作。

Answer 1

您也可以使用[Element.on()](https://docs.sencha.com/extjs/6.2.0/classic/Ext.dom.Element.html#method-on)触发点击事件。

on 方法是addListener 的简写。将事件处理程序附加到此对象。

例如：

el.on("click", function(){
  //do something...
  //
}, this);

我这个FIDDLE，我已经使用你的代码创建了一个演示并进行了一些修改。我希望这将帮助/指导您实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.Panel', {

            renderTo: Ext.getBody(),

            collapsible: true,

            margin: '0 0 50 0',

            layout: {
                type: 'table',
                // The total column count must be specified here
                columns: 3
            },
            defaults: {
                // applied to each contained panel
                bodyStyle: 'padding:20px',
                border: 0
            },

            title: '<span class="mytitle">Key settings</span>',

            items: [{
                html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',

            }, {
                html: '|Your key is active|',
            }, {
                html: '|Expiring date: 27.04.2018|',
            }],

            listeners: {
                afterrender: function (panel) {
                    Ext.get(panel.el.query('span.mytitle')[0]).on('click', function (e) {
                        alert(e.target.innerText)
                    }, panel);
                }
            }
        });
    }
});

Answer 2

解决方案：

替换

title: 'Key settings',

带有自定义标题：

header: {
    title: 'Custom header title',
    listeners: {
        click: function(h, e) {
            var tm = new Ext.util.TextMetrics(h);
            if (e.getX() < tm.getWidth('Custom header title')) {
                Ext.Msg.alert('Information', 'Do some action!');
            }   
        }
    }
}

工作示例：

var dashboardPanel1 = Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    collapsible: true,
    margin: '0 0 50 0',

    layout:
    {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    defaults:
    {
        // applied to each contained panel
        bodyStyle: 'padding:20px',
        border: 0
    },


    //title: 'Key settings',
    header: {
        title: 'Custom header title',
        listeners: {
            click: function(h, e) {
                var tm = new Ext.util.TextMetrics(h);
                if (e.getX() < tm.getWidth('Custom header title')) {
                    Ext.Msg.alert('Information', 'Do some action!');
                }   
            }
        }
    },

    items: [
    {
        html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',

    },
    {
        html: '|Your key is active|',
    },
    {
        html: '|Expiring date: 27.04.2018|',
    }],
});

注意事项：

该示例使用 ExtJS 4.2 进行了测试。标题宽度使用 Ext.util.TextMetrics 计算。