Le Contrôleur

Nous allons créer le controleur MainBorder.js dans le répertoire controller de notre application.

Ext.define('Appli.controller.MainBorder',{
    extend: 'Ext.app.Controller',
    views: [
        'MainBorder'
    ],
    refs: [
        {ref: 'MainBorder', selector: 'viewport mainborder'}
    ]
    
});

On remarque deux propriétés nouvelles :

• views : un tableau de vue associées à ce controleur. De ce faite, la vue MainBorder serra automatiquement inclue dans notre projet à la manière d'un Ext.require().
• refs: un tableau de références :
  • ref: 'MainBorder' le mot qui servira référence à notre vue.
  • selector : 'viewport mainborder'
    • Ce selecteur fonction sur le principe des xpath xml. Dans ce cas on pointe sur le xtype mainborder qui se trouve dans le xtype viewport. Autrement dit nous faisons une référence vers la vue borderPanel qui se trouve dans notre viewport.
    • Le selecteur peut aussi être l'alias (xtype) du composant.