ExtJS 이벤트 처리기에서 클래스 변수에 액세스하려면 어떻게해야합니까?

Question

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

수표 처리기에서 this.getUrl에 어떻게 액세스합니까?

Answer 1

속성 getUrl에 액세스하는 방법은 여러 가지가 있습니다. 여기에 몇 가지 가능한 옵션은 다음과 같습니다

1. Ext.getCmp : 당신은 FormPanel (또는 당신이 사용하는 어떤 다른 extjs라는 구성 요소)에 대한 id을 설정하면 Ext.getCmp() 방법을 사용하여 액세스 할 수 있습니다. 그래서,

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

2. OwnerCt 속성 : 당신이 (부모가 당신의 체크 박스를 들고있는 경우) 당신의 부모 컨테이너에 액세스해야하는 경우에는 공공 재산 OwnerCt을 통해 부모 컨테이너에 액세스 할 수 있습니다.

3. refOwner 속성 : 코드에서 ref 시스템을 사용하는 경우에는 용기 잡아하고 필요한 변수에 액세스하려면이 등록 정보를 사용할 수있다.

첫 번째 옵션을 사용하는 것이 쉽다고 생각합니다.

Answer 2

이벤트 처리기는 일반적으로 다른 범위 (this 값)에서 호출됩니다.

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

을 당신이 정말로 이벤트 핸들러에서 this으로 사용할 수있는 부모 개체를 원하는 경우에, 당신이 Ext.Function.bind을 사용할 수 있습니다 또는 : 당신이 원하는 모든 핸들러에서 단일 값 인 경우, 어휘 범위 지정 갈 수있는 가장 쉬운 방법은 범위를 수정

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

업데이트 : Ext.Function.bind는 ExtJS로 4 기능입니다. 당신의 ExtJS 3.x 또는 아래에 있다면, 당신은 같은 말에 Function.createDelegate를 사용할 수 있습니다

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

Answer 3

아무도 명백한을 제안하지 않았다 왜, 궁금해 그냥에게 내선 방식을하고 '범위'설정을 사용 재산 :

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