Come posso accedere alle variabili di classe in un gestore di eventi ExtJS?

Question

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

Come accedere a this.getUrl nel gestore di assegni?

Answer 1

Ci sono diversi modi per accedere alla proprietà getUrl. Qui ci sono poche opzioni possibili:

1. Utilizzare Ext.getCmp: se si imposta un id per i vostri FormPanel (o altro componente extjs tutto ciò che si sta utilizzando), è possibile accedervi utilizzando Ext.getCmp() metodo. Così,

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

2. Usare OwnerCt proprietà: Se avete bisogno di accedere al tuo contenitore principale (Se il genitore sta tenendo la tua casella di controllo) è possibile accedere al contenitore padre attraverso la proprietà pubblica OwnerCt.

3. proprietà Usa refOwner: se si utilizza il sistema ref nel codice, è possibile fare uso di questa proprietà per entrare in possesso del contenitore e accedere alla variabile richiesta.

Penso che sarà facile per te andare con la prima opzione.

Answer 2

I gestori di eventi vengono solitamente chiamati da un ambito diverso (valore this). Se invece si è un singolo valore nel gestore, scoping lessicale è il modo più semplice per andare:

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 se davvero si vuole l'oggetto padre disponibile come this nel vostro gestore di eventi, è possibile utilizzare Ext.Function.bind per modificare il campo di applicazione:

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

Aggiornamento: Ext.Function.bind è una caratteristica ExtJS 4. Se siete su ExtJS 3.x o inferiore, è possibile utilizzare Function.createDelegate allo stesso fine:

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

Answer 3

Mi chiedo perché nessuno ha suggerito l'ovvio, basta farlo nel modo Ext e utilizzare il config 'scope' Proprietà:

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