Extjs 4 MVC loading a view from controller

Rob  P. picture Rob P. · May 4, 2011 · Viewed 45.1k times · Source

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

Abdel Raoof picture Abdel Raoof · May 5, 2011

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.