Search code examples
javascriptextjsextjs3

Removing ExtJS default menu listeners

I am using extJS 3.4. I have a pop up menu item in which there is a textbox which can take keyboard input (for form submit).

Whereas, I cannot traverse the already typed text if I have to modify the already typed content in the text field.

After analyzing, I found that in the event listeners there are listeners attached to this component via a parent div (mainMenu) which is causing the issue.

Event Listeners

Once these listeners are removed (from the debugger) the left/right keys start working on the textfield component.

I am not sure how to remove this listener in the code.

Any help appreciated.

Here is the code sample (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>

Here is the code sample (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();
});

To reproduce the issue, you need to click Button w/ Menu which will open a textbox. In this textbox once you type few characters & press on left arrow key it doesn't traverse. Whereas in the textbox given beside the button you can.

SS here:

Screen Shot

Solution

  • Finally, I have figured out how to resolve this issue. The way to remove the listener is to go to parent div component & call removeAllListeners() method on the element. The element can be accessed in the afterRenderHandler function using this.el & then calling this.el.parent().removeAllListeners() so that it removes the un-required listeners interfering with the user experience. You could call the parent method in a chained fashion if the listener identified is a nth level parent (call the method n times).

    Ex: this.el.parent().parent().removeAllListeners().

    You could also try to access the element directly if you have the ID by calling: var el = Ext.get('mainMenu'); & then calling el.removeAllListeners();