TabContainer는 windowresize에서만 탭을 표시합니다.

Question

TabContainer를 만들고 프로그래밍 방식으로 해당 TabPage 내용을 채우고 싶지만 TabPages는 표시되지 않습니다. 지금까지 내 코드 :

 _buildUI: function() { 
      var bordercontainer = new dj_BorderContainer({ style: "height: 100%; width: 100%;", gutters: false, region: "top" }); 
      var tabcontainer = new dj_TabContainer({ useMenu: false, region: "center", tabposition: "top", doLayout: "false", style: "height: 100%; width: 100%;" }); 

      for (var i = 0; i < ki_KisConfig.widgets.movingwindow.calccount; i++) { 
       var contentpane = new dj_ContentPane({ title: "Calculation " + (i + 1), content: "content", style: "height: 100%; width: 100%;" }); 

       //contentpane.startup(); 
       tabcontainer.addChild(contentpane); 
      } 

      tabcontainer.startup(); 
      bordercontainer.addChild(tabcontainer); 
      bordercontainer.startup(); 
      do_domConstruct.place(bordercontainer.domNode, this.interface, "first"); 
      bordercontainer.resize({ h: "265px", w: "432px" }); 
     }, 

나는 주위 검색 좀 다른 일을 시도했습니다. 내가 볼 수 있듯이 doLayout -Property는 here을 언급했습니다. 나는 또한 here in the last posting을 언급 한 BorderContainer을 사용하고 나는 here과 같은 TabContainer를 만든 후에 크기를 조정하려고하고있다. 포함 된 위젯의 postCreate - 또는 startup- 함수에서 메소드를 호출하면 문제가되지 않습니다.

스타일을 통해 너비와 높이를 설정하거나 모든 "하위"위젯을 시작하려고합니다.

아무 것도 작동하지 않으며 브라우저 창 크기를 조정하거나 developertools (F12)를 열거 나 닫음으로써 크기를 조정할 때 TabContainer 만 표시됩니다. 표시되면 내가 원하는 것처럼 보입니다. 유일한 문제는 TabList의 크기가 0x0이고 DOM을 직접 검사 할 때 TabPaneWrapper과 동일하다는 것입니다.

아무도 아이디어가 있습니까?

tablist에서 레이아웃이 이상하고 또한 프로그램 선택한 탭의 내용이 표시되지 않습니다 :

편집

에만 BorderContainer에 시동을 호출 한 후 나는이 결과를 얻을. 모든 창 크기 조정 후 다시 괜찮 :

솔루션 (요약)

나는 BorderContainer과 HTML 템플릿에서 TabContainer을 정의하는 가장 좋은 결과를 검색. 불행히도 tablist의 레이아웃은 여전히 ​​실패했습니다. This answer은 올바른 탭 목록 레이아웃을 위해 솔루션을 제공했습니다. 내 위젯에 resize()가 포함되어 있지 않아 추가 했으므로 이제 모든 것이 올바르게 작동합니다. 코드에

 resize: function() { 
      var tabcontainer = dj_registry.byId("tabContainerMW"); 
      if (tabcontainer) { 
       tabcontainer.resize(arguments); 
      } 
     }, 

Answer 1

일부 노트 :

가 region 속성이 여기에 필요하지 않습니다. BorderContainer 자식의 위치를 ​​나타내는 데만 사용됩니다.

var bordercontainer = new dj_BorderContainer({ 
    style: "height: 100%; width: 100%;", 
    gutters: false, 
    region: "top" 
}); 

ContentPane에 너비와 높이를 설정할 필요가 없으므로 TabContainer를 사용하십시오.

var contentpane = new dj_ContentPane({ 
    title: "Calculation " + (i + 1), 
    content: "content", 
    style: "height: 100%; width: 100%;" 
}); 

샘플을 만들었습니다. 아마도 도움이됩니다.

편집

첨가로

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer", 
 
    "dijit/layout/ContentPane", "dojo/domReady!"], 
 
function(BorderContainer, TabContainer, ContentPane) { 
 
    
 
    // first create the BorderContainer without any arguments. 
 
    let bc = new BorderContainer({}, "bc"); 
 
    
 
    // then create your TabContainer with region center. 
 
    let tc = new TabContainer({ 
 
    region: 'center' 
 
    }, document.createElement("div")); 
 
    
 
    // add it to your BorderContainer 
 
    bc.addChild(tc); 
 
    
 
    
 
    // then create three tab panes (ContentPane) and add them to your TabContainer 
 
    let cp = new ContentPane({ 
 
    content: "My tab pane!", 
 
    title: "My tab title" 
 
    }, document.createElement("div")); 
 
    tc.addChild(cp); 
 
    
 
    let cp2 = new ContentPane({ 
 
    content: "My second tab pane!", 
 
    title: "My second tab title" 
 
    }, document.createElement("div")); 
 
    tc.addChild(cp2); 
 
    
 
    
 
    let cp3 = new ContentPane({ 
 
    content: "My closable tab pane!", 
 
    title: "My closable tab title", 
 
    closable: true 
 
    }, document.createElement("div")); 
 
    tc.addChild(cp3); 
 
    
 
    // call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's). 
 
    bc.startup(); 
 

 
});

body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<span class="tundra" style="width: 100%; height: 100%;"> 
 
    <div id="bc" style="width: 100%; height: 100%;"></div> 
 
</span>

: 나는 실패를 재현 fiddle을 만들 수 있었다. 여기서 문제는 대화 쇼가 끝난 후 createDialogContent() 메서드가 호출되고 있다는 것입니다. 아래의 주석 섹션에서 언급했듯이 대화 내용을 표시하기 전에 내용을 만드는 것이 중요합니다.

이 피들 (코드 하단)에는 두 개의 섹션이 있는데,이 두 섹션은 동일한 방법을 호출하며 방금 전 환되었습니다. 첫 번째 스 니펫에서는 메서드가 잘못된 순서로 호출됩니다. 두 번째 스 니펫에서 올바른 순서로 호출됩니다.

// uncomment this 
    createDialogContent(); 
    dialog.show(); 

    // comment this 
    // dialog.show(); 
    // createDialogContent();