删除 ExtJS 默认菜单监听器
Posted
技术标签:
【中文标题】删除 ExtJS 默认菜单监听器【英文标题】：Removing ExtJS default menu listeners 【发布时间】：2018-03-21 14:58:45 【问题描述】：我正在使用 extJS 3.4。我有一个弹出菜单项，其中有一个可以接受键盘输入（用于表单提交）的文本框。
然而，如果我必须修改文本字段中已输入的内容，我将无法遍历已输入的文本。
经过分析，我发现在事件侦听器中有侦听器通过父 div (mainMenu) 附加到该组件，这导致了问题。
一旦这些监听器被移除（从调试器中），左/右键开始在textfield 组件上工作。
我不确定如何在代码中删除此侦听器。
任何帮助表示赞赏。
这里是代码示例（html）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class=" ext-strict">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toolbar with Menus</title>
<script type="text/javascript" src="./Toolbar with Menus_files/ext-base.js"></script>
<script type="text/javascript" src="./Toolbar with Menus_files/ext-all.js"></script>
</head>
<body class=" ext-webkit ext-chrome ext-mac" id="ext-gen3">
<script type="text/javascript" src="./Toolbar with Menus_files/menus.js"></script>
<div id="container">
<div id="toolbar"></div>
</div>
</body>
</html>
这里是代码示例（JS）：
Ext.onReady(function()
var combo = new Ext.form.ComboBox(
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true,
width: 135,
getListParent: function()
return this.el.up('.x-menu');
,
iconCls: 'no-icon'
);
var menu = new Ext.menu.Menu(
id: 'mainMenu',
style:
overflow: 'visible' // For the Combo popup
,
items: [
combo
]
);
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add(text:'Button w/ Menu', menu: menu );
menu.addSeparator();
// add a combobox to the toolbar
var combo = new Ext.form.ComboBox(
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:135
);
tb.addField(combo);
tb.doLayout();
);
要重现此问题，您需要单击Button w/ Menu，这将打开一个文本框。在此文本框中，一旦您键入几个字符并按左箭头键，它就不会遍历。而在按钮旁边给出的文本框中，您可以。
这里是：
【问题讨论】：
我试过了：combo.removeListener('keydown'); menu.removeListener('keydown');以及许多其他选择。似乎没有什么可以删除继承的事件。 【参考方案1】：最后，我想出了如何解决这个问题。删除侦听器的方法是转到父 div 组件并在元素上调用 removeAllListeners() 方法。可以使用this.el 在afterRenderHandler 函数中访问该元素，然后调用this.el.parent().removeAllListeners() 以便它删除干扰用户体验的不需要的侦听器。如果识别的侦听器是第 n 级父级（调用该方法 n 次），您可以以链式方式调用 parent 方法。
例如：this.el.parent().parent().removeAllListeners()。
如果您有 ID，也可以尝试直接访问该元素，方法是调用：var el = Ext.get('mainMenu'); & 然后调用 el.removeAllListeners();
【讨论】：
以上是关于删除 ExtJS 默认菜单监听器的主要内容，如果未能解决你的问题，请参考以下文章
ExtJS 下拉框监听事件日期选择器监听事件实现动态给items添加删除数据