javascript - 从 ExtJS 6.6 href 链接运行控制器功能
问题描述
是否可以从 html 字符串中的 href 标记调用控制器函数?......我似乎无法让任何工作,所以我想我可能做错了什么。
我使用 ExtJS 6.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>'
}]
}]
}]
我不能去的一点是;
<a href="#" class="logout">Log out</a>
如果我使用按钮 xtype,我可以通过处理程序调用它,它运行良好,但我现在需要将其更改为文本链接。
这是有效的按钮代码;
{
xtype: 'button',
text: 'Logout',
handler: 'onLogout'
}
获得此文本链接以进行调用的任何帮助onLogout
都会很棒。
谢谢
解决方案
你可以打电话onLogout
使用Event delegation
。你需要panel
像这样附加监听器
{
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()
});
推荐阅读
- kotlin - 科特林 -
相对 - sql - 在时间范围内的一天中搜索时,哪个日期比较更有效?
- android - ScrollView 内的 Android Spinner 下划线颜色
- postgresql - PostgreSQL 通过 pgMail 发送电子邮件错误 38000
- ssl - 通过 SSL 连接到 Kafka 的 Filebeat
- python - 在 Python 中向 sftp 子进程发送密码
- here-api - RouteFeatureWeightType 究竟是如何工作的?
- blockchain - 重新派遣功能的费用
- php - PHP Regex - 无法获取可选的命名捕获组
- html - 如何修复我的 htaccess,它将我的页面全部重定向到一个索引