ExtJS4 modularization with stand-alone controllers? - model-view-controller

Question

I'm trying to split an ExtJS4 application into modules.
- app
- store
- controller
- model
- view
- module
- m1
- model
- view
- controller
- m2
- model
- ...
The problem is, when I start the application and it inits one of the m1 controllers, the controller has no this.control() function.
-- edit --
I defined a class inside of the controller folder.
Ext.define( 'App.module.ping.controller.Ping', {
extend: 'Ext.app.Controller',
requires: [
'App.module.ping.view.PingPanel'
],
init: function() {
this.control( {
'#app.module.ping': {
render: this.onPanelRendered
}
} );
},
onPanelRendered: function() {
...
}
} );
Later I call
Ext.create('App.module.ping.controller.Ping').init();
but I get this error:
Uncaught TypeError: Cannot call method 'control' of undefined
Ext.define.control./lib/extjs-4.1.0/src/app/Controller.js:414
Ext.define.init./app/module/ping/app/controller/Ping.js:11
Ext.define.init./app/module/ping/app/Module.js:11
(anonymous function)app.js:17
(anonymous function)app.js:35
Module.js is the file with the create() call
Ping.js is the file with the define() call
-- edit2 --
Pathological example:
input:
Ext.define( 'MyController', {
extend: 'Ext.app.Controller',
init: function() { console.log('initialized'); }
});
output:
function constructor() {
return this.constructor.apply(this, arguments);
}
input:
Ext.create('MyController');
output:
constructor
input:
MyController.create();
output:
constructor
-- edit3 --
The controllers require the application object in the config object when created. The application object adds itself to all the controllers, which are not manually created with create. It calls something like this:
Ext.create('App.controller.Users', { application: this, ... } );
Later it uses the application object to redirect the control call to it.
control: function ( config ) { this.application.control( config ) };
So I'm probably gonna implement some mechanism, which adds the application to those controllers automatically, when I create them.

Answer 1

Have you tried
var pingController = Application.getController('App.module.ping.controller.Ping');
pingController.init(); //or pingController.init(Application);
where Application is a reference to the object created during Ext.application.launch - such as
var Application = {};
Ext.application({
//all of your settings,
launch:function(){
Application = this;
//other launch code
}
}
});

Answer 2

To anyone else who comes here searching for a solution to:
Uncaught TypeError: Cannot call method 'control' of undefined
Day long frustration aside, the above answer did not solve my problem, but lead me to try the following, which did fix the issue:
// app.js
Ext.application({
...
launch: function(){
var me = this;
...
me.getController('ControllerName');
}
});
// inside controller/ControllerName.js
init: function(app){
var me = this;
app.control({
'#editButton': {
click: function(){
me.someFunction();
}
}
});
},
That app variable is the same as the "var Application = {}" that's in the chosen answer for the question -- meaning I didn't need to add it globally (or at all). I must've tried a million different things, but this finally worked. Hope it saves someone else.

Answer 3

Don't need to call init() manually. Just call Ext.create and constructor will be called automatically.