EXT JS 5 - Override ViewController definition?

Question

I want all my ViewControllers to have two custom methods.

I tried to accomplish this by creating a class that extends from the ViewController, called CustomViewController, and then having my other ViewControllers extend my CustomViewController class, but then I get a warning message in the console saying:

[W] Overriding existing mapping: 'controller.login' From 'MyApp.view.mybutton.MyButtonController' to 'MyApp.view.override.CustomViewController'. Is this intentional?

And the component I tested it with didn't even load.

I realize I could do this straight from the ext-all-debug.js library that's inside the ext folder in my app's root folder, but then when I use Sencha CMD to build the app it'll use my original library that's in my workspace, and not the one I have in my app's folder, so my changes will only work while developing and won't carry on to production.

What's the proper way of doing this? Is there a standard?

Answer 1

That error probably means that you have the same alias config on both Eathisa.view.login.loginController and Eathisa.view.override.EathisaViewController. There will be some ambiguity as to which class to load when you try to use it by an alias, that is why the class system is warning you.

From what you describe it doesn't sound like you need an override at all. If you need to have some methods in all your ViewControllers, you can add them in a custom ViewController and then use it as a base for all other ViewControllers in your application, instead of Ext.app.ViewController:

Ext.define('Eathisa.view.AbstractViewController', {
    extend: 'Ext.app.ViewController',
    // Note that there is no "alias" property here, so that
    // this abstract VC can't be instantiated by alias

    // You can even make these custom methods excluded from
    // production build by enclosing them in the <debug></debug>
    // comment brakets:
    //<debug>
    methodFoo: function() {
        ...
    }
    //</debug>
});

Ext.define('Eathisa.view.login.LoginController', {
    extend: 'Eathisa.view.AbstractViewController',
    alias: 'controller.login',

    methodThatUsesFoo: function() {
        // Just don't forget to enclose the code that *calls*
        // debug-only methods in the same <debug> brackets
        //<debug>
        this.methodFoo();
        //</debug>

        ...
    }
});

If it's not feasible to extend all your ViewControllers from the same abstract VC, implement the custom methods in a mixin instead, and include that mixin in the VCs that need debug methods:

Ext.define('Eathisa.mixin.Debug', {
    methodFoo: function() {
        ...
    }
});

Ext.define('Eathisa.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.login',

    // Conditionally include the debugging mixin
    //<debug>
    mixins: [
        'Eathisa.mixin.Debug'
    ],
    //</debug>

    ...
});