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来解决这个问题，因为ContentPane知道如何调整自己的大小

参见Dojo中的子部件won't render(将具有0高度)