Accessing view in the controller of Ext JS 4

Controller in Ext JS framework work as a glue between view, model, store (and data). It can listen to different events on the view/UI and handle events. So if you want to manipulate a particular view then the most appropriate place would be the corresponding controller.

Let's take a simple view named as myView as shown below. I have removed other attributes for making it simpler. Things to note here is alias of the view.

 Ext.define('App.view.myView', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.myview',
    //..

 });

Access View in Controller

Controller might access the same UI component time and again. Ideal approach would be to do it only once and then save a reference to avoid subsequent searches. Controllers provide an easy approach for the same. We can define references using selectors and then we can use them in any of the methods in controller. By using refs array we can define as many references as we want.

Each reference should be an object with at least two configurations. First is the ref property, which is the name of our reference, and second is the selector for the reference.  You should be careful to give selector name as the alias without the keyword 'alias'. And ref is used to give a meaningful name for the same. There is no restriction on ref; you can give any name. And after this view will be available through a getter method as shown below :

 Ext.define('App.controller.myController, {
     extend: 'Ext.app.Controller',

       views: ['myView'],  //Not Required
       refs: [
{ref: 'viewz', selector: 'myview'} 
],
        init: function(application) {
          //event listners 
        },
       hideView: function(){
         var vu= this.getViewz();
        vu.hide();
      }
 });
 

This helps in speeding up the process as searching for the UI/view component will be done only once. And you can use it at multiple places without causing any performance issue.