La classe Viewport

Cette classe : Viewport.js se trouve dans le répertoire : tutoExtJs4  / application / view

Ext.define('Appli.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me,{

            items: [{
               xtype: 'panel',
               layout: 'fit',
               title: 'Mon Application MVC'
           }]

        });
       
        me.callParent(arguments);
    },
   
});

Ext.define est la nouvelle méthode pour créer ses propre classes dérivée d'une autre. En extJs3 on utilisait Extend.

Ext.define, dans cet exemple possède deux paramètres :

• 'Appli.view.Viewport' : Une chaîne contenant le nom de notre classe (ici, le nom est Viewport et il se trouve dans le répertoire view de application)
• { ... } : un objet de paramètre de configuration.

Dans cet objet on définie la configuration de notre nouvelle classe Viewport :

• extend: 'Ext.container.Viewport' : le nom de la classe dont on hérite (ici la classe Viewport)
• layout : 'fit' définit que ce viewPort ne peut avoir qu'un composant enfant qui prendra tout l'espace
• initComponent : la méthode qui permet d'ajouter les nouveaux composant à notre classe de base
  
  • Ext.applyIf : permet de fusionner la configurations de nos nouvelles données avec celles de la classe.
    • me : une variable correspondante à la classe (this)
    • items: un tableau de composant enfant : ici, un panel principale qui contient le titre : Mon Application MVC  
  • me.callParent() : la méthode qui permet d'appeler la méthode initComponent de la classe parent.
    • arguments : la totalité des paramètres éventuellement passer à la méthode initComponent.