javascript - ExtJS - 将监听器添加到标题

Question

我有一个带有 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|',
    }],
});

如何将监听器附加到标题？

所以，当我点击关键设置时，将会执行一些操作。

Answer 1

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

The on method is shorthand for addListener. Appends an event handler to this object.

例如:

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);
                }
            }
        });
    }
});