删除 ExtJS 默认菜单监听器

Question

我正在使用 extJS 3.4。我有一个弹出菜单项，其中有一个可以接受键盘输入（用于表单提交）的文本框。

然而，如果我必须修改文本字段中已键入的内容，则无法遍历已键入的文本。

经过分析，我发现事件监听器中有监听器通过父级 div (mainMenu) 附加到此组件，这导致了问题。

一旦（从调试器中）删除了这些侦听器，left/right 键就开始在 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，这将打开一个文本框。在此文本框中，一旦您键入几个字符并按下左箭头键，它就不会遍历。而在按钮旁边的文本框中，您可以。

这里是 SS：

Answer 1

终于，我想出了解决这个问题的方法。移除侦听器的方法是转到父 div 组件并在元素上调用 removeAllListeners() 方法。可以使用 this.el 在 afterRenderHandler 函数中访问该元素，然后调用 this.el.parent().removeAllListeners() 以便它删除干扰用户体验的 un-required 侦听器。如果确定的侦听器是第 n 级父级（调用该方法 n 次），则可以以链式方式调用 parent 方法。

例如：this.el.parent().parent().removeAllListeners()。

如果您有 ID，您也可以尝试直接访问该元素，方法是调用：var el = Ext.get('mainMenu'); 然后调用 el.removeAllListeners();

删除 ExtJS 默认菜单监听器

Removing ExtJS default menu listeners

javascript

extjs

extjs3