Comment puis-je accéder aux variables de classe dans un gestionnaire d'événements ExtJS ?

Question

this.getUrl = 'test';
this.items.add(
      new Ext.form.Checkbox(
            {
              listeners: {
                check: function(checkbox, checked) {
                  alert(this.getUrl);
                },
             }
       )
)

Comment accéder à this.getUrl dans le gestionnaire de contrôle ?

Answer 1

Je me demande pourquoi personne n'a suggéré l'évidence, c'est-à-dire de le faire à la manière d'Ext et d'utiliser la propriété de configuration 'scope' :

this.getUrl = 'test';
this.items.add(
    new Ext.form.Checkbox(
            {
            listeners: {
                check: function(checkbox, checked) {
                    alert(this.getUrl);
                },
                scope: this
            }
    )
)

Answer 2

Les gestionnaires d'événements sont généralement appelés à partir d'un champ d'application différent ( this ). Si tout ce que vous voulez, c'est une seule valeur dans le gestionnaire, le cadrage lexical est la solution la plus simple :

var getUrl = 'test';  // now it's just a regular variable
this.items.add(
      new Ext.form.Checkbox(
            {
              listeners: {
                check: function(checkbox, checked) {
                  alert(getUrl); // still available - lexical scope!
                },
             }
       )
)

Ou si vous voulez vraiment que l'objet parent soit disponible en tant que this dans votre gestionnaire d'événement, vous pouvez utiliser Ext.Function.bind pour modifier le champ d'application :

this.getUrl='test';
this.items.add(
      new Ext.form.Checkbox(
            {
              listeners: {
                check: Ext.Function.bind( function(checkbox, checked) {
                  alert(this.getUrl);
                }, this ),  // second arg tells bind what to use for 'this'
             }
       )
)

Mise à jour : Ext.Function.bind est une fonctionnalité d'ExtJS 4. Si vous utilisez ExtJS 3.x ou une version inférieure, vous pouvez utiliser Function.createDelegate à la même fin :

this.getUrl='test';
this.items.add(
      new Ext.form.Checkbox(
            {
              listeners: {
                check: function(checkbox, checked) {
                  alert(this.getUrl);
                }.createDelegate(this)
             }
       )
)

Answer 3

Il y a plusieurs façons d'accéder à la propriété getUrl . Voici les quelques options possibles :

1. Utiliser Ext.getCmp : Si vous définissez un id pour votre FormPanel (ou autre composant extjs que vous utilisez), vous pouvez y accéder en utilisant Ext.getCmp() méthode. Ainsi,

 var yourComponent = Ext.getCmp('yourComponentId');
 alert(yourComponent.getUrl);

2. Utiliser la propriété OwnerCt : Si vous avez besoin d'accéder à votre conteneur parent (si le parent contient votre case à cocher), vous pouvez accéder au conteneur parent par l'intermédiaire de la propriété publique OwnerCt .

3. Utiliser la propriété refOwner : Si vous utilisez ref dans votre code, vous pouvez utiliser cette propriété pour obtenir le conteneur et accéder à la variable requise.

Je pense qu'il vous sera facile de choisir la première option.