[4.1.2] Possible issue in design of initEvents method

**Daniil** · 25 Sep 2012 4:02 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.2

Browser versions tested against:

Chrome
FireFox
IE9

Description:

There is a possible issue in the design of the initEvents method. Actually, according the fact that it is a protected method, you can consider it is not a bug, but, maybe, you will change/improve something looking at this issue.
I am working on the input mask plugin for TextField. It attaches many events to its inputEl. Then I need to apply a new mask I just call
Code:
```
field.inputEl.purgeAllListeners();
```
to detach all previous listeners of the inputEl, then call
Code:
```
field.initEvents();
```
to return back the internal listeners. I do this way to avoid detaching all listeners step-by-step, because there are many.
It works well with ExtJS 3.
But in ExtJS 4 a component's focus listener (maybe, more) is not fired anymore. Probably, due to the fact that the purgeAllListeners call removes a focus listener of the focus element, but the initEvents doesn't restore it. Should it not be restored?

Steps to reproduce the problem:

Run the sample
Focus the field
Click the Button
Focus the field

The result that was expected:

The focus listener is still triggered.

The result that occurs instead:

The focus listener is not triggered anymore.

Test Case:

Code:

<html>
<head>
    <title>TextField purgeAllListeners initEvents</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all-debug.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.form.field.Text", {
                id: "TextField1",
                renderTo: Ext.getBody(),
                listeners: {
                    focus: {
                        fn: function () {
                            console.log('Focus');
                        }
                    }
                }
            });

            Ext.create("Ext.button.Button", {
                renderTo: Ext.getBody(),
                text: "field.inputEl.purgeAllListeners(), field.initEvents()",
                handler: function () {
                    var field = Ext.getCmp("TextField1");

                    field.inputEl.purgeAllListeners();
                    field.initEvents();
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>

**evant** · 25 Sep 2012 5:14 AM

The focus listener isn't added because it may attempt to be added at other times by the focus manager, so the component keeps a listener. If you intentionally purge it, you'll need to clear the flag:

Code:

delete c.focusListenerAdded;

**Daniil** · 25 Sep 2012 5:54 AM

Evan, thank you for the answer! It works.

Code:

field.inputEl.purgeAllListeners();
delete field.focusListenerAdded;
field.initEvents();

A small question more for such ExtJS guru as you are

Sure, if you have a time to answer.

Would you recommend or do not such way to purge listeners? I am just not sure I won't meet some similar issues anymore.

**evant** · 25 Sep 2012 2:50 PM

Well, technically you're messing around with the internals of the class, so it's a bit of "at your own risk".

Though I do agree it's certainly painful to try and remove "all but one" listener. Perhaps you can look for an alternate approach.

**Daniil** · 25 Sep 2012 9:13 PM

Thank you, Evan! Got it.

[4.1.2] Possible issue in design of initEvents method

Thread Tools

Search Thread

Display

[4.1.2] Possible issue in design of initEvents method

[4.1.2] Possible issue in design of initEvents method