트리의 이벤트 처리기에서 루트 노드에 어떻게 액세스합니까?

Question

Ext.tree.Panel 내부의 이벤트 처리기에서 내 treepanel에 액세스하려면 어떻게해야합니까?

다음 itemClick 코드가 작동하지 않습니다. 나는 모두 '위로' 및 '내려'가는 시도했다. 내가 도구 모음에 버튼이있는 경우

Ext.create('Ext.tree.Panel', { 
    title: 'Example Tree', 
    width: 200, 
    height: 450, 
    store: store, 

    listeners: { 
     itemclick: function(dv, record, item, index, e) { 

      var me = this; 
      var panel = me.up('treepanel'); 
      var rn = panel.getRootNode(); //panel undefined :(
     } 
    } 
} 

그러나 그것을 잘 작동합니다 :

dockedItems: [{ 
    xtype: 'toolbar', 
    dock: 'bottom', 
    items: [{ 
     text: 'Search', 
     handler: function() { 
      var me = this; 
      var panel = me.up('treepanel'); 
      var rn = panel.getRootNode(); // :) 
     } 
    }] 
}] 

이 두 예는이 fiddle에 예시되어있다.

Answer 1

범위가 ExtJS에서 작동하는 방식입니다 (구체적으로 자바 스크립트에서). 첫 번째 예에서는 'this'(나) 자체가 treepanel입니다. 당신이 설정 패턴을 관찰하는 경우

`listeners: { 
     itemclick: function(dv, record, item, index, e) { 

      //var me = this; 
      //var panel = me.up('treepanel'); 
      var panel = this; //'this' is treepanel 
      var rn = panel.getRootNode(); 
     } 
    }` 

가, 두 번째 예제 오는 다음 시도는 그래서 '이'버튼되고, 도구 모음 내에서 버튼을 만들 수있는 바로 가기 패턴과 구성 요소 쿼리 트리를 얻을 수 있습니다 .

Answer 2

패널 내부에있는 것처럼 Bala의 접근 방식이 효과적입니다. 아래처럼 시도하지 않으면. itemclick 함수의 첫 번째 매개 변수는 뷰입니다. 패널을 가져올 수 있습니다.

listeners: { 
    itemclick: function(dv, record, item, index, e) { 
     var panel = dv.up('treepanel'); 
     var rn = panel.getRootNode(); 
    } 
}