Javascript 从ExtJS 6.6 href链接运行控制器函数

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

Im使用ExtJS6.6

我有一些用户信息和一个注销链接，但没有任何效果，这就是我所拥有的

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>'
        }]
    }]
}]

任何帮助获取此文本链接以调用

onLogout

的方法都将非常有用

---

谢谢

您可以使用

事件委派调用
onLogout
。您需要像这样在
面板上附加侦听器

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

你可以在这里与工作人员联系

代码片段

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

Ext.define（'MyViewController'{
扩展：“Ext.app.ViewController”，
别名：“controller.myview”，
/**
*此事件将在注销单击时触发
*/
onLogoutClick:函数（e）{
控制台日志（e）；
Ext.Msg.alert（'Success'，'You have click on logout button'）；
}
});
外部创建({
xtype:'面板'，
标题：“从ExtJS 6.6 href链接运行控制器函数”，
布局：“边框”，
控制器：“myview”，
身高：200，
项目：[{
地区：'北'，
身高：200，
项目：[{
xtype:'面板'，
布局：“列”，
项目：[{
xtype:'面板'，
列宽：0.3
}, {
xtype:'面板'，
列宽：0.7，
听众：{
元素：“el”，
代表：“a.注销”，
单击：“onLogoutClick”
},
html:“你好，欢迎来到我的页面
”
}]
}]
}],
renderTo:Ext.getBody（）
});
漂亮。。。这正是我想要的，非常感谢
{
    xtype: 'panel',
    listeners: {
        element: 'el',
        delegate: 'a.logout',
        click: 'onLogoutClick'
    }
}

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