JQuery가 ExtJS가 아닌 DOM에 액세스 할 수있는 이유는 무엇입니까?

Question

나는 (JQuery와 AJAX를 통해) 회전로드 다른이 함수와 그것의 내부 뷰에 하나 개의보기에서의 ExtJS 객체를 구축하는 Kohana 프레임 워크가 :

function replaceContentOnClick(id, route) { 
    $('body').delegate(('#' + id), 'click', function(){ 
     $.get(route, function(data) { 
      $('#region_center .x-panel-body').html(data); 
     }); 
    }); 
} 

이 잘 작동을하지만 경우에만 이러한 자식 뷰는 HTML/Javascript/JQuery 일 뿐이지 만 자식 뷰에서는 존재하는 DOM 요소에 렌더링하고 JQuery 요소를 성공적으로 추가 할 수있는 경우에도 ExtJS 개체를 표시 할 수 없습니다. 이 순간에 ExtJS에 DOM이 존재하지 않는 것처럼 보입니다.

주요 문제는 다음과 같습니다는 jQuery 코드는 성공적 요소를 채우는 :

<script type="text/javascript"> 
$('#region_center .x-panel-body').html('this is from jquery...'); 
</script> 

하지만 의 ExtJS 코드는 동일한 요소 (AN 방화범이 끌려/네트 패널에보고 된 오류가없는 채우기에 실패) :

<script type="text/javascript"> 
    var region_center = new Ext.Panel({ 
     id: 'region_center', 
     region: 'center', 
     renderTo: '#region_center .x-panel-body', 
     margins:'10 10 10 10', 
     padding:'10 10 10 10', 
     autoScroll:true, 
     html: 'this is from ExtJS...' 
    }); 
</script> 

내가 너무 ExtJS를 할 수 JQuery와 같이 DOM 요소에 액세스 할 수 있는지 어떻게해야합니까?

Answer 1

이 두 비트의 코드는 다른 작업을 수행하고 있습니다. 이 코드는 :

<script type="text/javascript"> 
$('#region_center .x-panel-body').html('this is from jquery...'); 
</script> 

... '#region_center .x를 패널 바디'에서 DOM 노드에 액세스하고 새로운 값 innerHTML을 주입한다. 이 코드는 :

<script type="text/javascript"> 
    var region_center = new Ext.Panel({ 
     id: 'region_center', 
     region: 'center', 
     renderTo: '#region_center .x-panel-body', 
     margins:'10 10 10 10', 
     padding:'10 10 10 10', 
     autoScroll:true, 
     html: 'this is from ExtJS...' 
    }); 
</script> 

... (즉, renderTo 설정 패널 자체 ID 'region_center'로 패널을 가리키는) 자체에 에게 완전한 패널 구성 요소를 렌더링하려고합니다. 이것은 의미가 없으며 작동하지 않습니다. 기존 DOM 노드에만 구성 요소를 렌더링 할 수 있습니다.이 예에서는 패널이 아직 렌더링되지 않았기 때문에 id가 'region_center'인 기존 DOM 노드가 없습니다.

이 될 것이라고 jQuery를에 일을하는지 정확히 수행하는 해당 코드 :이 실행될 때 모든 것을, 그것은 당신의 jQuery 코드처럼 정확하게 실행해야 DOM에서 동일한 가정

<script type="text/javascript"> 
Ext.get('#region_center').child('.x-panel-body').update('this is from Ext...'); 
</script> 

.

이제 BorderLayout이 올바르게 렌더링되고 실제로 'region_center'ID가있는 가운데 영역이 있다고 가정하면 동적으로 새 패널을 추가 할 수 있어야합니다 (새 패널의 ID가 고유한지 확인해야합니다) . 이 경우 레이아웃을 관리하기 때문에 DOM API 대신 Component API를 사용하는 것이 좋습니다.

// assuming myCenterPanel is a valid *component* ref (NOT a DOM element): 
myCenterPanel.add(new Ext.Panel(...)); 
myCenterPanel.doLayout(); 

또한 중앙 패널 (레이아웃 설정을 통해) 할당 적절한 레이아웃을 가지고 있는지 확인 싶어 : 예를 들어, 당신이 그런 짓을 할 것입니다. 위에서 설명한 것처럼 새로운 패널을 기본 DOM 노드에 직접 렌더링하는 경우 (위에서 시도한 것처럼) 이 일 수 있지만 장기적으로 다른 문제가 발생할 수 있습니다 (다시 말하지만 Ext의 이 경우 레이아웃 관리자).