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

Question

I looked through a lot of ExtJS 4 MVC examples, and all of them pretty much show the same thing: the application creates a viewport, loads in a view and has “controllers” that initialize the controller:

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

This is great, but now let me say that in my application I want my view to have a button that opens an entire new controller / view, how do you do it?

I think that what I'm looking for is a way to say something like: - Create a controller (run its initialization code) - in the controller's initialization code, create a view and show it

Is it right, and how do you do it?

I want to clarify that in my case I will need TWO separate instances of the SAME controller / view combination. For example, I might have a tabbed view and two tabs. Then I want to put in each tab two separate instances of the controller "User" and "user.List".

Answer 1

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

In extjs, all controllers get an instance when the application loads. You can use the launch method in the Application class to start browsing. And let the controller listen to the events of this point of view. In the controller, you can always access another controller using the Application object:

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

In the above code, I call the displayListPanel method, which is available in ControllerName1. This method contains code to display the view (grid) on the screen. Similarly, I can have methods that create views as 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(); }, 

Answer 2

Just checked the documentation for the new controller classes and classes.

It seems to me that you can always find the right kind when you need it. For example, you can:

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

check this out and look at class methods:

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