Button click event fired twice....why???

[cmadison0005]

I am working on an application that shows different content based on the users login role (i.e. admin/user/warmonger/etc.) For example, there is a search button which is handled in the init function of the controller:

init: function()
{ 'printlocationsearchview button[action=printlocation_query]'

                         { click : this.queryPrintLocation }
},
queryPrintLocation : function(button)
{ console.log('Query Clicked'); }

For reference i have included a snippet of the view housing the button as well (container housing button item list):

{ xtype: 'container',
   layout: 'hbox',
   items: [{
                   xtype: 'button',
                   text: 'Search',
                   action: 'printlocation_query',
                   padding: 3              
               }]

The issue that i am having is that anytime this button is clicked i can see in the NET tab in firebug that the GET is fired twice. I have included a screenshot of such.



Why are these event firing twice? Is it several event instead of a repeat event? (i.e. mouse out and click). Ive been trying to resolve this for a couple of days now, and would greatly appreciate and guidance. Thanks!

[mitchellsimoens]

Do you have two controllers listening for the same thing?

[cmadison0005]

The controllers are instantiated dynamically according to role. For the current app, there is only one controller for this role. This is part of the reason i am so confused at this point. Thanks for the quick response.

[skirtle]

Does the console.log message in queryPrintLocation appear twice?

Try adding an inline handler to the button and adding some logging there, confirm whether that is called twice.

Try putting in a breakpoint and see if you can trace why it is called twice.

[cmadison0005]

Yes, console.log statements show up twice as well as the fact that request to the database are made twice.

[cmadison0005]

So heres the solution that i have found. In the application (app.js), the controller list is built dynamically based on the role that is passed in. So far so good. Once the parent controller has decided which content the user will see, the buttons are rendered respective to that content. Each button is tied to a specific controller for its content.

Here's where the problem came in....when one of the role based buttons is clicked, the controller associated with it is dynamically added using:

controller = this.getController('ControllerName');

Immediately following this line of code was:

controller.init();

By explicitly calling the controller.init() function, all of the listeners i had specified in the init/this.control function were replicated. This effectively "double hooked" all of the actions i was monitoring for.

The above being said, from an ExtJS standpoint, there appears to be no upper cap to the number of times this could happen. Is there no kind of uniqueness criterion for event handlers within a controllers configuration object? If i specify two different handlers for a button inline, only the final one is applied. However, there appears to be no controller configuration level analog to this.

Hopefully my folly can save someone else some time.

[subv3rsion]

@cmadison0005

We encountered a similar issue in our controllers recently. Though we are not doing the dynamic loading of the controllers at the Ext.application level as you are. In our custom routing we lookup the controller and fire the init().

What we did to get around all the duplicate events, rather than say clearing all the event listeners in init(), was we moved the this.control() into the onLaunch() event. As init() is called when your application boots up, and the onLaunch() is kind of like init(), but called after the viewport is created.

Ext.define('App.controller.Search', {
    extend: 'Ext.app.Controller',
    
    views: [
        'transaction.Search'
    ],
    
    // Called when your application boots.
    init: function(app) {
        console.log('App.controller.Transaction.Search init');
    },
    
    // Like init, but called after the viewport is created.
    onLaunch: function(app){
    console.log('App.controller.Transaction.Search onLaunch');    
    
    this.control({
        'transaction-search tool[action=help]': {
        click: this.onHelpClick
        }
        });    
    },
    
    index: function(){
    console.log('App.controller.Transaction.Search index');
    this.render('transaction.Search');
    },
    
    onHelpClick: function(btn) {
    Ext.Msg.show({
        title: 'Help Text',
        msg: 'Lorem ipsum dolor set amet.',
        buttons: Ext.Msg.OK,
        icon: Ext.Msg.QUESTION
    });
    }
});