Dojo stackContainer在窗口調整大小之前不會顯示兒童

Question

這是我正在創建的小部件。目標是在頂部有一個由單選按鈕控制的stackContainer。

我已經嘗試了dojo文檔中的示例，但它具有相同的錯誤行爲。

define(["dojo/ready", "dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom-construct", 
     "dojo/_base/lang", "dojo/on", "dojo/dom-attr", "dijit/form/RadioButton", 
     "dojo/dom-style", "dijit/layout/ContentPane", "dijit/layout/StackContainer", 
     "tcs/Log"], 
function(ready, declare, _WidgetBase, domConstruct, 
     lang, on, attr, RadioButton, 
     style, ContentPane, StackContainer, 
     log) { 

    /** 
    * @class 
    * @name gijit.workflow.debug.combi 
    */ 
    return declare("gijit.workflow.debug.combi", [_WidgetBase], { 
     workflow : null, 
     panes : null, 
     width : "600px", 
     height : "400px", 

     _beforeCall : function(d) { 
      alert("beforeCall"); 
     }, 

     buildRendering : function() { 
      this.domNode = domConstruct.create("div", {id:"myform"}); 
      var contain = domConstruct.create("div", null, this.domNode, "last"); 
      var stackContainer = new StackContainer({ 
       style: "height: " + this.height + "; width: " + this.width + "; border: 0px solid red" 
      }, contain); 
      var buttons = domConstruct.create("form", null, this.domNode, "first"); 
      for(var i=0; i<this.panes.length; i++){ 
       var contentPane = new ContentPane({ 
        id : this.panes[i].title, 
        title : this.panes[i].title, 
        content : this.panes[i].content 
       }) 
       stackContainer.addChild(contentPane); 

       var buttonDiv = domConstruct.create("span", null, buttons, "last"); 
       style.set(buttonDiv, "display", "inline-block"); 
       style.set(buttonDiv, "margin", "10px"); 

       var label = domConstruct.create("div", {innerHTML: this.panes[i].title}, buttonDiv, "last"); 

       if(i==0){ 
        var RButton = new RadioButton({ 
         title : this.panes[i].title, 
         showTitle : true, 
         checked : true, 
         value : this.panes[i].title, 
         name : "options", 
         onClick : function(a){stackContainer.selectChild(a.explicitOriginalTarget.attributes.value.textContent)} 
        }).placeAt(buttonDiv); 
       } else { 
        var RButton = new RadioButton({ 
         title : this.panes[i].title, 
         showTitle : true, 
         checked : false, 
         value : this.panes[i].title, 
         name : "options", 
         onClick : function(a){stackContainer.selectChild(a.explicitOriginalTarget.attributes.value.textContent)} 
        }).placeAt(buttonDiv); 
       } 
       contentPane.resize(); 
       contentPane.startup(); 
      } 
      stackContainer.startup(); 
        //Hacks in attempt to get the stuff to show 
      for(var i=0; i<stackContainer.getChildren().length; i++){ 
       stackContainer.getChildren()[i].startup(); 
       stackContainer.getChildren()[i].resize(); 
       if(typeof stackContainer.getChildren()[i].getChildren()[0] === 'object'){ 
        stackContainer.getChildren()[i].getChildren()[0].startup(); 
       } 
      } 
      stackContainer.resize(); 
     }, 
    }); 
}); 

它的大部分工作。但爲了獲得任何顯示，我必須調整窗口大小。所有重新啓動/啓動呼叫在最初不起作用後都被添加，但是他們都沒有做任何事情。

Answer 1

如果以編程方式將子窗口小部件添加到窗口小部件中，則需要定義啓動子窗口小部件的啓動函數。那麼每當創建一個新實例並將其放置在dom中時，就應該調用該啓動函數。例如：

require(["dojo/ready", "dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom-construct", 
    "dojo/_base/lang", "dojo/on", "dojo/dom-attr", "dijit/form/RadioButton", 
    "dojo/dom-style", "dijit/layout/ContentPane", "dijit/layout/StackContainer"], 

function (ready, declare, _WidgetBase, domConstruct, 
lang, on, attr, RadioButton, 
style, ContentPane, StackContainer) { 


    var MyClass = declare("gijit.workflow.debug.combi", [_WidgetBase], { 
    startup: function() { 
     this.inherited(arguments); 
     stackContainer.startup(); 
    } 
    }); 
    var x = new MyClass({}); 
    x.placeAt('node'); 
//manually call startup after instantiating the widget. If the parser is what is creating your widget, it calls startup automatically. startup must be called after the widget is in the dom. 
    x.startup(); 
    console.log(x); 
}); 

Answer 2

讓的contentPane而不是_WidgetBase的窗口小部件的子類來解決這個問題，因爲ContentPanes知道如何調整自己

也看到Sub-widgets won't render (will have 0 height) in Dojo