ExtJS 4 how to create and display a new controller/view from another controller/view?

Question

I have looked over lots of examples of ExtJS 4 MVC, and they all pretty much show the same thing: The application creates a viewport, loads in a view, and has a 'controllers' defined, which init's the controller:

Ext.application({
    name: 'AM',

    controllers: [
        'Users'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist'
                }
            ]
        });
    }
});

Thats great, but now let's say in my application I want a button contained within my view to open a whole new controller/view, how do you do that?

I think what I am looking for is a way to say something like: - Create Controller (run it's init code) - in the controller init code, create the view and display it

Is that correct, and how do you do this?

I want to clarify that in my case I would need TWO individual instances of the SAME controller/view combination. For example, I might have a view with a tab panel and two tabs. I then want to put TWO separate instances of a 'Users' controller and 'user.List' view inside each tab.

Solution 1

I think what I am looking for is a way to say something like: - Create Controller (run it's init code) - in the controller init code, create the view and display it

In extjs, all controllers get instantiated when the application is loaded. You can use the launch method in the Application class to start off a view. And Have a controller listen to events of that view. In a controller, you can always access the other controller using the application object:

 this.application.getController('ControllerName1').displayListPanel(options);

In the above code, I am calling a method displayListPanel that is available in ControllerName1 controller. This method holds the code to display a view (a grid panel) onto the screen. Similarly, I can have methods that create views like a new form for data entry. Here is another example:

this.application.getController('ControllerName1').newDateForm();

and In my method:

newDataForm : function() {

        var view = Ext.widget('form',{title: 'New Data'});
        view.show();
    },

Solution 2

Just checked the documentation of new controller and view classes.

It seems to me, that you could always find needed view when you need it. For example you can:

//somewhere in controller
this.getView('Viewport').create(); // or .show()

check this and view class methods:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller-method-getView