Extjs 4 MVC loading a view from controller

Question

Ok so I have a controller with a method in which I want to load a view.

1. How do I load a view from a controller?
2. How do I pass some parameters from the controller to the view when I load it?

Any help is much appreciated.

Answer 1

To load a view, you can use Ext.widget(). Use Ext.define() to create a view in your view file. I would recommend using the alias property to define an inline xtype for the view.

When you need to load the view, you create an view using Ext.widget() and specify the xtype (alias for your view). Here is an example:

 // define a window
 Ext.define('MyApp.view.user.Add',
    extend: 'Ext.window.Window',
    alias : 'widget.adduser',
    .
    . // Add other properties, custom properties, methods, event handlers etc..
 });

Now, when you want to create an instance in your user controller, you do:

// create an instance
 var view = Ext.widget('adduser'); // refer the below note!

Note: note that there is no 'widget.'! it automatically gets added to the widget name you pass.

Now, taking about passing parameters. Like Ext.create method, you should be able to pass any parameters as:

 // create an instance with params
 var view = Ext.widget('adduser', {title: 'New User title'});

Regarding ref: refs help you in getting references to Views on your page. They do not help in creating an instance or load a view. If you have your view rendered, you can make use of the ref system to get hold of that instance and manipulate the view. You need to make use of the ComponentQuery to get reference of your view.

Answer 2

refs can be used to create new instances as well as access existing ones. By adding the option autoCreate: true to your ref, a call to the getter will result in a new instance being created using the ref definition as its config if no existing component matches the selector.

refs: [{
    ref: 'list'
    ,selector: 'myusersgrid#users'
    ,autoCreate: true

    // any additional options get passed as config when an instance needs to be created
    ,xtype: 'myusersgrid'
    ,itemId: 'users'
    ,store: 'Users'
    ,title: 'Users'
},{
    ref: 'otherList'
    ,selector: 'myusersgrid#administrators'
    ,autoCreate: true

    // any additional options get passed as config when an instance needs to be created
    ,xtype: 'myusersgrid'
    ,itemId: 'administrators'
    ,store: 'SpecialUsers'
    ,title: 'Special Users'
}],

Notice the use of the # to additionally match the itemId so I could have refs to multiple instances of the same xtype

There's also a forceCreate: true option which will make the ref's getter always return a new instance, without it autoCreate will create one instance the first time it's retrieved and then keep returning the same one.

Answer 3

If I understand your question I think you want to use refs, take a look at the docs for Ext.app.Controller: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.app.Controller.html

Basically you create a list of refs using css selectors:

refs: [
    {
        ref: 'list',
        selector: 'grid'
    }
],

Then later in the class you can access this ref by using get, i.e.:

refreshGrid: function() {
    this.getList().store.load();
}

The getList() method is created for you when you create the ref to 'list'.

Answer 4

I ran into this same problem. I created a method on my abstract base controller to retrieve the view instance and create on if it does not exist.

This will work properly even after the view has been destroyed - a new one will be created.

Ext.define('My.controller.Base', {
    extend: 'Ext.app.Controller',

    //Retrieves an instance of the top-level view
    //If it has not been created yet than one is instantiated
    //Also, overrides the .close() method on the view to 
    //null out the instance reference on the controller (very necessary)
    getViewInstance: function () {
        var self = this;

        if(!this.viewInstance) {
            if(this.views && this.views.length) {

                var view = this.getView(this.views[0]);

                this.viewInstance = view.create();

                this.viewInstance.close = function () {
                    view.prototype.close.apply(this, arguments);
                    self.viewInstance = null;
                };

            } 
        }

        return this.viewInstance;
    }
});

Now all my controllers can easily access their view from w/i controller code w/o any external variables.

Answer 5

Use Ext.create('Proper File Name to be opened',param1 = me);

In the newly created view, use this.param1 to access the parameters.

EG: Ext.create('view.HelloOverlay, param1 = "Hello", param2 = "World"); in the controller of HelloOverlay, using this.param1 will give "Hello" and this.param2 will give "World".

Sometimes the parameters passed will be present in the view so use this.getView().paramName