ExtJs 4.2 - Proper way to communicate between view and controller

Question

I am looking for a proper way to implement communication between my views and their respective controllers.

• Calling controller method from its view?
• Getting reference to its view inside controller?

So for now, I am calling controller's method in my view like this:

Ext.define('SomeApp.view.SomeTab', {
extend: 'Ext.grid.Panel',

alias: 'widget.someTab',

initComponent: function() {

    // Calling respective controller method to run the initializing sequence
    PfalzkomApp.app.getController('someTabController').initializeSomeTab();
    this.callParent();
}, ....

And to access my view inside my controller, I followed this solution

Ext.define('SomeApp.controller.SomeTabController', {
    extend: 'Ext.app.Controller',

    views: [
        'SomeTab'
    ],

    refs: [{
        ref: 'SomeTab',//xtype
    }],...

But I am only able to access my view after it is rendered which makes sense but I was wondering if there is a better solution.

Thank you.

Answer 1

In my opinion, (although you are using ExtJS 4.2), you can follow the Extjs architecture of the newest versions (5+,6+) which is that each view has its particular controller (or viewcontroller) associated. It's better than having a controller that listens events of multiple views.

In your case the controller could be:

Ext.define('SomeApp.controller.SomeTabController', {
    extend: 'Ext.app.Controller',

....

init: function() {
    this.control({
        'someTab': {
             beforerender: this.loadView//use the event you want
         } 
    })
},

...
loadView: function(view){
    //your code
}

The beforerender method allows you to access the view before its rendered. https://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.Panel-event-beforerender

So,

- Calling controller method from its view? Call the controller functions from the view can be donde with the property listeners and listen the event you want.

- Getting reference to its view inside controller? In this case, if you register an event of a component to call a function on your controller, usually this should be your view (someTab). Also you can listen events of the components in your view with selectors.

Hope this helps you!