Extjs Comment initialiser les nouveaux éléments de l'extension du - sans perdre la portée

Question

Je suis en train de s'améliorer à étendre les classes de Extjs, et mon evolvement me ont conduit à ce problème:

J'ai prolongé une Ext .Panel et je veux que mon extension ait une barre d'outils inférieure avec un bouton par défaut.

myPanel = Ext.extend(Ext.Panel, { 
    method: function() { 
     return 'response!'; 
    }, 

    bbar: new Ext.Toolbar({ 
     items: 
     [ 
      { 
       xtype: 'button', 
       text: 'Hit me!', 
       handler: function (button, event) { 
        alert(this.method()); 
       }, 
       scope: this 
      } 
     ] 
    }) 
}); 

Ce que je n'ai pas encore appris est pourquoi cela n'est pas autorisé. this pointe vers la portée globale et non vers le panneau étendu. Par conséquent, .method() correspond à undefined dans la fonction de gestionnaire.

Answer 1

Vous définissez le bbar sur le prototype plutôt que sur un objet spécifique. Remplacez initComponent et déplacez la définition bbar à l'intérieur de celui-ci.

myPanel = Ext.extend(Ext.Panel, { 
    method: function() { 
     return 'response!'; 
    }, 

    initComponent: function() {  
     var bbar = new Ext.Toolbar({ 
      items: 
      [ 
       { 
        xtype: 'button', 
        text: 'Hit me!', 
        handler: function (button, event) { 
         alert(this.method()); 
        }, 
        scope: this 
       } 
      ] 
     }); 

     // Config object has already been applied to 'this' so properties can 
     // be overriden here or new properties (e.g. items, tools, buttons) 
     // can be added, eg: 
     Ext.apply(this, { 
      bbar: bbar 
     }); 

     // Call parent (required) 
     myPanel.superclass.initComponent.apply(this, arguments); 

     // After parent code 
     // e.g. install event handlers on rendered component 
    } 
}); 

Voir http://www.sencha.com/learn/Manual:Component:Extending_Ext_Components pour un modèle que vous pouvez utiliser lors de l'extension des composants

Answer 2

Vous devez garder à l'esprit que l'objet anonyme qui est le premier élément du tableau items est créé dans la même portée que celui dans lequel Ext.extend(... est exécuté.

Si vous aviez ceci:

var o = { 'a': a, 'b': b, scope: this }; 

vous attendre à ce que o.a, o.b et o.scope aurait les mêmes valeurs que a, b et this dans le périmètre actuel. Ici, c'est un peu plus complexe parce que vous créez un objet en créant un tableau tout en créant un objet, etc., mais le raisonnement est le même.

Ce que vous devez faire est de définir la place this.bbar dans le constructeur:

myPanel = Ext.extend(Ext.Panel, { 
    method: function() { 
     return 'response!'; 
    }, 

    constructor: function(config) { 
     this.bbar = new Ext.Toolbar({ 
      items: 
      [ 
       { 
        xtype: 'button', 
        text: 'Hit me!', 
        handler: function (button, event) { 
         alert(this.method()); 
        }, 
        scope: this 
       } 
      ] 
     }); 

     myPanel.superclass.constructor.apply(this, arguments); 
    } 
});