CODEWITHSUNDEEP
javascriptextjsextjs5
developer747
developer747

Reputation: 15928

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

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');
    }
});

Upvotes: 0

Views: 4663

Answers (1)

And-y
And-y

Reputation: 1524

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');
    }
});

Upvotes: 2

Related Questions