La vue

Nous créons la classe MainBorder.js dans le répertoire view de notre application.

Ext.define('Appli.view.MainBorder', {
    extend: 'Ext.panel.Panel',
    alias:'widget.mainborder',
    layout: 'border',

    initComponent: function() {
        var me = this;
        Ext.applyIf(me,{

            items: [{
               xtype: 'panel',
               region:'west',
               width:200
              },{
                xtype: 'panel',
                region:'east',
                width:200
              },{
                xtype:'panel',
                region:'center'
              }]

        });
       
        me.callParent(arguments);
    }
   

});

 nous créons simplement un objet de type Border avec 3 panels : un au centre, un a gauche et un a droite.

On observe les propriétés:

• alias: 'widget.mainborder' définie un xtype (raccourcis) du nom de mainborder (toujours en minuscule) vers notre classe de vue MainBorder.

• 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, 3 panels : un au centre, un a gauche et un a droite.
  • 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.