¿Cómo puedo acceder a las variables de clase en un controlador de eventos ExtJS?

Question

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

¿Cómo accedo a this.getUrl en el controlador de verificación?

Answer 1

Hay varias formas de acceder a la propiedad getUrl. Aquí están las pocas opciones posibles:

1. Uso Ext.getCmp: Si define una id para sus FormPanel (u otro componente extjs lo que sea que esté utilizando), se puede acceder a él mediante Ext.getCmp() método. Así,

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

2. Uso OwnerCt propiedad: Si necesita acceder a su contenedor principal (Si el padre es la celebración de su casilla de verificación), podrá acceder al contenedor principal a través de la propiedad pública OwnerCt.

3. establecimiento Uso refOwner: si utiliza ref sistema en su código, puede hacer uso de esta propiedad para controlar la contenedor y acceder a la variable requerida.

Creo que será fácil ir con la primera opción.

Answer 2

Los controladores de eventos generalmente se llaman desde un alcance diferente (valor this). Si lo que quieres es un valor único en el controlador, ámbito léxico es la forma más fácil de ir:

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! 
       }, 
      } 
     ) 
) 

O si realmente desea que el objeto primario disponible como this en el controlador de eventos, puede utilizar Ext.Function.bind a modificar el alcance:

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' 
      } 
     ) 
) 

actualización: Ext.Function.bind es una característica ExtJS 4. Si estás en ExtJS 3.x o menor, puede utilizar Function.createDelegate al mismo fin:

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

Answer 3

Me pregunto por qué nadie ha sugerido que es obvio, simplemente haces de la manera Ext y utilizar la configuración 'alcance' propiedad:

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