viewport의 Ext JS Tolayout에는 아무것도 표시되지 않습니다

StackOverflow https://stackoverflow.com/questions/1630513

  •  06-07-2019
  •  | 
  •  

문제

전체 페이지를 다시로드하지 않고 기존 컨테이너에 새 구성 요소를 추가하는 것에 대한 많은 예제를 읽은 후에는 뷰포트 구성 요소 내부의 트리와 탭을 결합하면서 작은 문제로 실행됩니다.

내가하려는 것은 클릭 이벤트에 트리 노드에 등록하고 콘텐츠 컨테이너에로드하는 것입니다. Node 유형에 따라 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)에 대한 다양한 속성을 설정하려고했지만 아무 일도 일어나지 않았습니다.

내가 뭔가 잘못하고 있습니까?

도움이 되었습니까?

해결책

이제 Dom은 잘 작동하지만 Extjs는 새로 삽입 된 요소에 디스플레이 숨겨진 속성을 적용합니다. 따라서해야 할 일은 Show () 기능을 새로운 구성 요소에 적용하는 것입니다. Folowing Code는 다음과 같습니다.

{
  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;
    }
}}

다른 팁

돌출 전에 Dummy_Tabs2의 너비와 높이를 설정하십시오. Firebug로 검사하면 패널이있을 수 있지만 볼 수 없습니다.

ext.panel을 읽으십시오 API.

패널의 하위 항목을 지정하거나 패널에 구성 요소를 동적으로 추가 할 때 패널이 어린이 요소를 배열하기를 바라는 방법과 EXT의 내장 레이아웃 체계 중 하나를 사용하여 하위 요소를 크기를 조정 해야하는지 여부를 고려해야합니다. 기본적으로 패널은 컨테이너 레이 아웃 방식을 사용합니다. 이것은 단순히 어린이 구성 요소를 렌더링하여 컨테이너 내부의 다른 부분을 추가하고 크기를 전혀 적용하지 않습니다.

이것이 도움이되기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top