ExtJS MVC : how to remove handler from dynamic controller

Question

I'm creating a dynamic controller, according to the new MVC pattern in ExtJS4 and ran into a small problem. I've used the this.control method to attach the controller to my view. When create the controller a second time (going back and forth in my navigation), I have attached them couple times. My question is : What is the best way to destroy a controller or to remove all the listeners that I've setup via the this.control command.

Thanks in advance Chris

The code of my new controller looks like like :

I create the new controller like this:

var step1Controller = Ext.create("MyApp.controller.Step1Controller", {
    application : this.application
});
step1Controller.init();

In in the init function of my controller I've attached my controller to the view like this:

init : function() {
    this.addEvents(['step1completed','basecontructionaborted']);
    this.setupScreenLayout();
    this.getTmpConfiguredControlModelsStore().removeAll();
    this.application.fireEvent("addBreadCrumb", "Inbetriebnahme");
    this.application.fireEvent("addBreadCrumb", "Schritt 1/3");

    this.control({
        '#addmodelbutton' : {
            click : this.onAddBtnClick
        },
        '#modelviewer' : {
            modelselected : this.onPanelSelect
        },
        '#navigationcontainer #movemodelleftbutton' : {
            click : this.onMoveModelLeftClick
        },
        '#navigationcontainer #continuestep2' : {
            click : this.onContinueStep2Click
        },
        '#navigationcontainer #abortbutton' : {
            click : this.onAbortButtonClick
        }
    });

    console.log('[BaseConstruction | init] completed');
}

If you are destroying the view, then the EventBus should take care of removing the listeners automatically. — VoidMain
thank you guys, you mean I should use the EventBus instead of listening to the events like this? — Chris

Kaitlyn McDonald Kaitlyn McDonald · Accepted Answer · 2013-11-07T21:24:07

Old question, but I killed half a day on solving this, so I'll post how I was able to get around it. This question seems very similar to my own issue. Hope it's useful to someone else.

I am loading controllers/views dynamically, and all listeners were attached via the app.control inside of a controller's init(). Worked fine until I started destroying/initializing views repeatedly. The listeners remained on the views after view.destroy(), so initializing them later down the road caused those listeners (ie render, click, etc) to fire twice.

This solved it for me:

    app.control({
        'element': {
            beforerender: {
                fn: function(thing){
                    // beforerender stuff for thing

                    thing.on('select', function(this, record, item, index){
                        console.log('select fired');
                    });
                },
                single: true
            },
        }
    });

Note the "single: true" that's attached to the 'beforerender'. That's the crucial part. All other listeners that were previously written like 'beforerender' were moved to inside of it with the .on().

Cheers!

ExtJS MVC : how to remove handler from dynamic controller

1 Answers