EXT JS toLayout에 뷰포트가 표시되지 않음

Question

전체 컨테이너를 다시로드하지 않고 기존 컨테이너에 새 구성 요소를 추가하는 방법에 대한 많은 예제를 읽은 후 뷰포트 구성 요소에서 트리와 탭을 결합하면서 작은 문제를 해결했습니다.

내가하려고하는 것은 트리 노드에 대한 클릭 이벤트에 등록하고 컨텐트 컨테이너에로드하는 것입니다. 노드 유형에 따라 tabpanel, gridpanel 또는 다른 사용 가능한 구성 요소가 될 수 있습니다.

여기에 트리 오브젝트의 간단한 예입니다

{ 
    xtype: 'treepanel', 
    id: 'tree-panel', 
    listeners: { 
     click: function(n) { 

      var content = Ext.getCmp('content-panel'); 

      content.setTitle(n.attributes.qtip); 

      //remove all components from content-panel 
      content.removeAll(); 

      content.add(dummy_tabs2); 

      content.doLayout(); 

      return; 
     } 
    } 
} 

모든 DOM 조작 잘 갔다, 표시 제대로 등록 모든 새로운 제목을하지만, dummy_tabs2 표시되지 않습니다. doLayout (true | false, true | false)에 대한 다양한 속성을 설정하려고 시도했지만 아무 일도 발생하지 않습니다.

내가 잘못 했나요?

Answer 1

이제 DOM을 사용할 수 있지만 새로 삽입 된 요소에 숨겨진 속성을 표시하는 EXTJS가 적용됩니다. 이제 할 일은 새로운 컴포넌트에 show() 함수를 적용하는 것입니다. Folowing 코드는 다음과 같을 것입니다 :

{ 
    xtype: 'treepanel', 
    id: 'tree-panel', 
    listeners: { 
    click: function(n) { 

    var content = Ext.getCmp('content-panel'); 

    content.setTitle(n.attributes.qtip); 

    //remove all components from content-panel 
    content.removeAll(); 

    var container = content.add(dummy_tabs2); 

    content.doLayout(); 

    container.show(); 

    return; 
    } 
}} 

Answer 2

doLayout 앞에 dummy_tabs2의 너비와 높이를 설정하십시오. 방화범이 끌린 상자를 검사하십시오. 아마도 패널이 있지만 보이지 않을 수 있습니다.

Ext.Panel을 API에 기록하십시오.

때 하나 의 하위 항목 그 자식 요소가 필요 여부 패널, 또는 동적으로 당신이 그 자식 요소를 배치 에 패널을하고자하는 방법을 고려해야 에 기억 패널에 구성 요소를 추가하고 지정 Ext의 빌트인 레이아웃 스킴 중 하나를 사용하여 크기를 조정하십시오. 기본적으로 패널에서는 ContainerLayout 체계를 사용합니다. 이 은 하위 구성 요소를 렌더링하고 컨테이너 내에 을 하나씩 추가 한 다음 을 하나씩 추가하고 어떤 크기 조정도 전혀 적용하지 않습니다.

희망이 도움이 될 것입니다.