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 or possibly this thread help you? — incutonez
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

developer747 developer747 · Accepted Answer · 2015-08-22T00:35:04

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

    }
});

EXTjs access data set in one controller from another

2 Answers