ExtJS 4.2.1 - Cannot get View instance from the controller

Question

In my app I have the viewport with one item, a main view, which it is a simple class extending from Ext.container.Container.

I have a main controller too, and I'm trying to get the view instance, so dynamically I can push the corresponding items if the user is logged or not.

I've tried using views: ['MainView'], refs[ { selector: 'thextype' }], etc with no luck.

I was using the reference (ref) in sencha touch to do this kind of things, can you help me with Extjs v4.2 ?

Just for clarification, I'm not trying to get the DOM element, I'm trying to get the view instance with the associated methods.

Thanks in advance,

Answer 1

Define xtype of your view:

xtype: 'mainview'

and then in your controller:

requires: ['...'] // your view class
// ...
refs: [{
    ref: 'mainView',
    selector: 'mainview' // your xtype
}]

and then you can get the instance of your view in the controller with this.getMainView()

Answer 2

I've tried that without good results. What I'm trying to do is something like. Based on your response should work

Ext.define('MyApp.view.MainView', {
extend: 'Ext.container.Container',
alias: 'widget.mainContainer',
cls: ['mainContainer'],
items: [
    {
        xtype: 'panel',
        items: [
            {
                html: "my view"
            }
        ]
    }
]});

Ext.define('MyApp.controller.MainController', {
extend: 'MyApp.controller.BaseController',
refs: [
    {
        ref: 'mainContainer',
        selector: 'mainContainer'
    }
],

init: function() {
    this.getApplication().on({
        openDashboard: this.onOpenDashboard
    });
},
onOpenDashboard: function() {
    var mainContainerView = this.getMainContainer();
    mainContainerView.showSomething(); //mainContainerView should be an instance of the view.
}});

Where, openDashboard event is fired if after a login success.

Answer 3

After some time debugging, it seems the problem was the context where it was being called the function.

I've added in the init method a line like:

var openCrmDashboardFn = Ext.Function.bind(this.onOpenCrmDashboard, this);

and it worked.

Thank you!