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.

score 0 · Accepted Answer · answered Apr 18 '16 at 09:39

0

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!

answered Apr 18 '16 at 09:39

qmateub

512
4
9

Thank you for your time. I am doing some important stuff in initComponent http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Table-method-initComponent of my view. So can you tell me how I can put my implementation of initComponent in the Controller? – Abdul Rehman Yawar Khan Apr 18 '16 at 12:00
I dont' understand what you are asking. What are you doing in the initComponent? – qmateub Apr 18 '16 at 12:24
In my given code of view, you can see that inside initComponent method I am calling some method of a particular controller. Now my question is: If there is any other way to call this views controller's method? Or How can I move this initComponent definition from view to its controller? – Abdul Rehman Yawar Khan Apr 18 '16 at 12:29
Ah ok! In my answer you can see the function that is called when the `beforerender` event fires in the view, so call your function there: `beforerender: this.initializeSomeTab` and then implement that function in the controller. – qmateub Apr 18 '16 at 12:35
It helped. Although I had to made some extra changes to solve my issue. I am still looking for way that how I can access the controller inside initComponent. I'll wait a little before I accept so may be I get some more responses. Thank your for your time. – Abdul Rehman Yawar Khan Apr 19 '16 at 08:43

ExtJs 4.2 - Proper way to communicate between view and controller

1 Answers1