TabContainer Tabs zeigt nur bei windowResize

Question

Ich möchte ein TabContainer erstellen und seine TabPage Inhalt programmatisch füllen, aber die TabPages werden nicht angezeigt. Bis jetzt mein Code:

 _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" }); 
     }, 

Ich habe gegoogled herum und versuchte verschiedene Sachen. Wie Sie sehen können, setze ich die doLayout -Eigenschaft erwähnt here. Ich benutze auch eine BorderContainer wie here in the last posting erwähnt und ich versuche es, um die Größe nach dem TabContainer wie erwähnt here zu schaffen. Es doens't ganz gleich, ob ich die Methode in der postCreate Aufruf - oder die startup -function des enthaltenden Widget.

Ich versuche, die Breite und die Höhe über Stil zu setzen oder all „sub“ Widget zum Start.

Nichts funktioniert und die TabContainer wird nur angezeigt, wenn ich den Browser neu bin Größe ändern oder es durch Öffnen Ändern der Größe/die developertools Schließen (F12). Wenn es angezeigt wird, sieht es so aus, als ob ich es möchte. Das einzige Problem ist, dass die TabList eine Größe von 0x0 und das gleiche mit der TabPaneWrapper hat, wenn ich direkt das DOM inspiziere.

Hat jemand eine Idee? Ich erhalte dieses Ergebnis

bearbeiten

Nach dem Start nur auf dem Border Aufruf:

Das TabList Layout ist seltsam, und auch der Inhalt der programmatischen ausgewählten Registerkarte wird nicht angezeigt. Alles ist wieder in Ordnung nach Größe eines Fensters ändern:

Solution (Zusammenfassung)

ich das beste Ergebnis holte die BorderContainer mit der Definition und der TabContainer in der HTML-Vorlage. Leider ist das Layout der Tabliste immer noch fehlgeschlagen. This answer lieferte die Lösung für das korrekte Tablisten-Layout: Mein Widget enthielt keine resize(), also habe ich es hinzugefügt und alles funktioniert jetzt gut.

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

Answer 1

Einige Anmerkungen zum Code:

Das region Attribut hier nicht erforderlich ist. Es wird nur verwendet, um die Position für BorderContainer-Kinder anzugeben.

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

Sie brauchen nicht eine Breite und Höhe auf ContentPane zu setzen, lassen dies die TabContainer tun.

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

Ich habe eine Probe für Sie erstellt, vielleicht hilft Ihnen das weiter.

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>

bearbeiten

Als Ergänzung: konnte ich ein fiddle, schaffen, die den Fehler wiedergibt. Das Problem hier ist, dass die createDialogContent() Methode aufgerufen wird, nachdem der Dialog angezeigt wird. Wie ich unten im Kommentarbereich erwähnt habe, ist es wichtig, den Inhalt eines Dialogs zu erstellen, bevor er angezeigt wird.

In dieser Geige (unteres Ende des Codes) sind zwei Abschnitte, die beide die gleichen Methoden aufrufen, nur transponiert. Im ersten Snippet werden die Methoden in der falschen Reihenfolge aufgerufen. Im zweiten Abschnitt werden sie in der richtigen Reihenfolge aufgerufen.

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

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