EXT JS 5 - Override ViewController definition?
I want all my ViewControllers to have two custom methods.
I tried to accomplish this by creating a class that extends from ViewController
called CustomViewController
and then when my other ViewControllers extend my class CustomViewController
, but then I get a warning in the console:
[W] Overriding existing mapping: 'controller.login' From 'MyApp.view.mybutton.MyButtonController' to 'MyApp.view.override.CustomViewController'. Is this intentional?
And the component I tested didn't even load.
I understand that I can do this directly from the ext-all-debug.js library which is inside a folder ext
in the root folder of the application, but then when I use Sencha CMD to build the application it will use my original library which is in my working scopes and not the one I have in my application folder, so my changes will only work in development and won't continue until production.
What's the correct way to do this? Is there a standard?
source to share
This error probably means that you have the same configuration alias
as Eathisa.view.login.loginController
well as on Eathisa.view.override.EathisaViewController
. There will be some ambiguity as to which class is loaded when you try to use it with an alias, so the class system warns you.
From what you're describing, it doesn't look like you need to override. If you need to have some methods in all of your ViewControllers, you can add them to your own ViewController, and then use it as the 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 you can't distribute all of your ViewControllers from the same abstract VC, then inject your own methods in the mixin instead, and include this mixin in the VC 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>
...
});
source to share