运行 来自 ExtJS 6.6 href 的控制器函数 link

Question

是否可以从 html 字符串中的 href 标签调用控制器函数？ ...我似乎什么都做不了，所以我想我可能做错了什么。

我正在使用 ExtJS 6.6

我有一些用户信息，然后注销 link，但没有任何效果，这就是我所拥有的。

items: [{
    region: 'north',
    height: 200,
    items: [{
        xtype: 'panel',
        layout: 'column',
        items: [{
            xtype: 'panel',
            columnWidth: 0.3
        }, {
            xtype: 'panel',
            columnWidth: 0.7,
            html: '<div class="userstuff" style="text-align: right;">Hello, welcome to my page<br /><a href="#" class="logout">Log out</a></p></div>'
        }]
    }]
}]

我无法开始的一点是；

<a href="#" class="logout">Log out</a>

如果我使用按钮 xtype，我可以通过处理程序调用它，它工作得很好，但我现在需要将它更改为文本 link。

这是有效的按钮代码；

{
    xtype: 'button',
    text: 'Logout',
    handler: 'onLogout'
}

任何帮助将此文本 link 调用 onLogout 的方法都很棒。

谢谢

Answer 1

您可以使用 Event delegation 调用 onLogout。您需要像这样

在 panel 上附加监听器

{
    xtype: 'panel',
    listeners: {
        element: 'el',
        delegate: 'a.logout',
        click: 'onLogoutClick'
    }
}

您可以在此处检查工作 fiddle。

代码段

Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myview',

    /**
     * This event will fire on Logout click
     */
    onLogoutClick: function(e) {
        console.log(e);
        Ext.Msg.alert('Success', 'You have clicked on logout button');
    }
});

Ext.create({
    xtype: 'panel',
    title: 'Running a controller function from an ExtJS 6.6 href link',
    layout: 'border',
    controller: 'myview',
    height: 200,
    items: [{
        region: 'north',
        height: 200,
        items: [{
            xtype: 'panel',
            layout: 'column',
            items: [{
                xtype: 'panel',
                columnWidth: 0.3
            }, {
                xtype: 'panel',
                columnWidth: 0.7,
                listeners: {
                    element: 'el',
                    delegate: 'a.logout',
                    click: 'onLogoutClick'
                },
                html: '<div class="userstuff" style="text-align: right;">Hello, welcome to my page<br /><a href="#" class="logout">Log out</a></p></div>'
            }]
        }]
    }],

    renderTo: Ext.getBody()
});