EXTjs access data set in one controller from another

Question

I have a view that has some child views (all of them extend Ext.grid.Panel). The controller of the parent view sets a variable that I want to access in the controller in the child view. I tried setting a variable in the init function of the parent controller. Then I tried reading its value in a click function of the child page's controller. But then that threw an uncaught ReferenceError.

How do I do this?

Ive tried something like this on Sencha fiddle. I am trying to get the alert(MyApp.app.getController('MyApp.controller.Whatever').myVar); to work

//CHILD

//Controller
Ext.define('MyApp.controller.child', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.child',
    init: function() {
        alert("Initializing Child");
    }
});



//View
Ext.define('MyApp.view.child', {
    extend: 'Ext.form.field.Text',
    alias:'widget.child',
    controller: 'child',
    title: 'Alien',
    width: 200, 
     listeners: {
                    focus: function(comp){

                        alert(MyApp.app.getController('MyApp.controller.Whatever').myVar);
                    }
                },
    renderTo: Ext.getBody()


});

//----------

//PARENT 

//Controller
Ext.define('MyApp.controller.Whatever', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.Whatever',
    myVar:0,
    init: function() {
        alert("initializing parent");
        myVar=20;
    }
});



//View
Ext.define('MyApp.view.Whatever', {
    extend: 'Ext.form.Panel',
    alias:'widget.Whatever',
    controller: 'Whatever',
    title: 'Hello',
     items:[{
                xtype: 'child'

            }],

    width: 200,

    renderTo: Ext.getBody()

});

//------------------------


Ext.application({
    name: 'MyApp',


    launch: function() {

        Ext.create('MyApp.view.Whatever');

    }
});

We'll need some more information. Which version of Ext JS are you trying to accomplish this in and do you have any sample code? What other research have you done... does [this thread](http://stackoverflow.com/questions/19253885/extjs-how-correcty-call-a-controller-method-from-another-controller-or-closure) or possibly [this thread](http://stackoverflow.com/questions/18030705/pass-data-from-controller-to-existing-view-in-sencha-tocuh) help you? — incutonez, Aug 21 '15 at 15:45
Maybe you can use. `Ext.ComponentQuery.query('parentController')[0].fireEvent('yourEventName');` in your child-controller and then in the parent-controller register that event (yourEventName) and return your variable in the function. — qmateub, Aug 21 '15 at 15:52

score 0 · Accepted Answer · answered Aug 22 '15 at 00:35

With trial and error, this is what finally worked

//CHILD

//Controller
Ext.define('MyApp.controller.child', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.child',

});



//View
Ext.define('MyApp.view.child', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.child',
    controller: 'child',
    title: 'Alien',
    listeners: {
        focus: function(comp) {

            alert(MyApp.app.getController('MyApp.controller.Whatever').getMyVar());
        }
    },
    renderTo: Ext.getBody()


});

//----------

//PARENT 

//Controller
Ext.define('MyApp.controller.Whatever', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.Whatever',

    myVar: "oldValue",

    init: function() {
        myVar = "newValue";

    },
    doInit: function() {
//THIS METHOD IS NECESSARY!!!
    },
    getMyVar: function() {
        return myVar;
    },
});



//View
Ext.define('MyApp.view.Whatever', {
    extend: 'Ext.form.Panel',
    alias: 'widget.Whatever',
    controller: 'Whatever',
    title: 'Hello',
    items: [{
        xtype: 'child'

    }],



    renderTo: Ext.getBody()

});

//------------------------


Ext.application({
    name: 'MyApp',


    launch: function() {

        Ext.create('MyApp.view.Whatever');

    }
});

score -1 · Answer 2 · answered Aug 21 '15 at 21:27

-1

Do this - Make your controller

'Ext.app.Controller' instead of 'Ext.app.ViewController'

and then try to access with same code

MyAppName.app.getController('Training.myController').testVar

answered Aug 21 '15 at 21:27

Mohit Saxena

1,439
1
12
21

EXTjs access data set in one controller from another

2 Answers2