In Extjs, how to call a a function in a view from another controller?

Question

I am trying to get this to work in Sencha Fiddle. The problem I am facing is that I get an error on this line

MyApp.app.getView('MyApp.view.test2').test();

When you click inside the textbox, it fails with an error (in console log) Uncaught TypeError: MyApp.app.getView(...).test is not a function

//Controller
Ext.define('MyApp.controller.test', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.test',
    myVar:0,
    init: function() {
    }
});

//View
Ext.define('MyApp.view.test', {
    extend: 'Ext.form.field.Text',
    alias:'widget.test',
    controller: 'test',
    title: 'Hello',   
    listeners: {
        focus: function(comp){
            MyApp.app.getView('MyApp.view.test2').test(); //Fails with an error that test is not a function                        }
    },
    renderTo: Ext.getBody()
});

//View
Ext.define('MyApp.view.test2', {
    extend: 'Ext.form.Panel',
    alias:'widget.test2', 
    title: 'Hello2',     
    renderTo: Ext.getBody(),
    test:function()
    {
        alert('in MyApp.view.test2');
    }
});

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('MyApp.view.test');
        Ext.create('MyApp.view.test2');
    }
});

You're getting the view, not the controller. Something like this, maybe? MyApp.app.getView('MyApp.view.test2').controller.test(); — reergymerej
What you are trying to do is called tight coupling which is bad practice and certainly not what MVVC is intended for. Use events / unobtrusive binding. — Greendrake
Besides that, your logic should be in a controller. Your view should only be responsible for presentation. docs.sencha.com/extjs/6.0/application_architecture/… — Tarabass

And-y And-y · Accepted Answer · 2015-08-28T14:40:38

The getView() function just returns the class and not the instance of the view. See ExtJs 5.1.1 Controller.getView() :

Returns a View class with the given name. To create an instance of the view, you can use it like it's used by Application to create the Viewport:

this.getView('Viewport').create();

To get the created view instance you can archive it with a Ext.ComponentQuery.

//query returns an array of matching components, we choose the one and only
var test2View = Ext.ComponentQuery.query('test2')[0];
// and now we can execute the function
test2View.test();

See the running minimalistic fiddle.

//View
Ext.define('MyApp.view.test', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.test',
    title: 'Hello',
    listeners: {
        focus: function (comp) {
            //query returns an array of matching components, we choose the one and only
            var test2View = Ext.ComponentQuery.query('test2')[0]; 
            test2View.test();
            //MyApp.app.getView('MyApp.view.test2').test();//Fails with an error that test is not a function
        }
    },
    renderTo: Ext.getBody()
});


//View
Ext.define('MyApp.view.test2', {
    extend: 'Ext.form.Panel',
    alias: 'widget.test2',
    title: 'Hello2',
    renderTo: Ext.getBody(),
    test: function ()
    {
        alert('in MyApp.view.test2');
    }
});


Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.create('MyApp.view.test');
        Ext.create('MyApp.view.test2');
    }
});

In Extjs, how to call a a function in a view from another controller?

1 Answers