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-屬性提到here。我也使用BorderContainer像提到的here in the last posting一樣，並且在創建像上面提到的here之類的TabContainer之後嘗試調整它的大小。 如果我正在調用包含小部件的postCreate - 或startup-函數中的方法，則無關緊要。

我想通過樣式設置寬度和高度或啓動每個「子」小部件。

沒有任何作用，並且TabContainer僅在調整瀏覽器窗口大小或通過打開/關閉developertools（F12）調整大小時纔會顯示。如果顯示它看起來像我想要它。唯一的問題是，當我直接檢查DOM時，TabList的大小爲0x0，與TabPaneWrapper的大小相同。

有沒有人有任何想法？

編輯

僅在調用使用BorderContainer啓動後我得到這樣的結果：

的標籤列表的佈局很奇怪，也沒有顯示程序選擇的選項卡的內容。一切的窗口大小調整後再次罰款：

解決方案（摘要）

我檢索到的最好的結果與定義BorderContainer並在HTML模板的TabContainer。不幸的是，tablist的佈局仍然失敗。 This answer爲正確的tablist佈局提供瞭解決方案：我的小部件不包含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();