Charger une vue depuis un Controller

Lors de mes développements avec le framework ExtJs dans sa version 4 j'ai eu besoin de récupérer une vue à partir du controller qui lui ai associé. Après mult recherche sur Google j'ai enfin trouvé comment faire.

Dans la suite j'appelle MaVue, ma vue et MonController mon Controleur.

Quand on recherche sur le web une solution à ce problème, la réponse qui revient le plus souvent et d'utiliser l'objet de configuration refs du Controleur. Cette approche nous indique qu'il faut utiliser le paramètre de configuration alias de la vue afin de définir un xtype inline permettant d'instancier la vue à l'aide de la méthode Ext.widget() en spécifiant le xtype.

Une exemple concret est plus parlant.

D'abord définissons la vue:

Ext.define('MaVue', {
 extend: 'Ext.container.Container',
 alias: 'widget.mavue',
 itemId: 'maVue'
 ...
});

Puis définissons notre Controller qui accède à cette vue

Ext.define('MonController', {
 extend: 'Ext.app.Controller',
 views: [
  'MaVue'
 ],
 refs: [{
    ref:'maVue',
    selector: 'container#maVue'
    autoCreate: run,
    forceCreate: true,
    xtype: 'mavue'
  },
  ...
  onLaunch: function(application) {
   var maVue = this.getMaVue();//on récupère la vue via la méthode getMonCotroller générée par 'refs'
  }
 ]
});

Le code des lignes 9, 10 et 11 est celui qui permet de récupérer notre vue depuis notre contrôleur à partir de la méthode getMaVue).