Javascript Dojo stackContainer在调整窗口大小之前不会显示子项

Javascript Dojo stackContainer在调整窗口大小之前不会显示子项,javascript,dojo,Javascript,Dojo,这就是我正在尝试创建的小部件。目标是使stackContainer由顶部的单选按钮控制 我在dojo文档中尝试了这个示例,但它也有同样的错误行为 define(["dojo/ready", "dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom-construct", "dojo/_base/lang", "dojo/on", "dojo/dom-attr", "dijit/form/RadioButton",

这就是我正在尝试创建的小部件。目标是使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();
        },
    });
});
定义([“dojo/ready”、“dojo/\u base/declare”、“dijit/\u WidgetBase”、“dojo/dom构造”,
“dojo/_base/lang”、“dojo/on”、“dojo/dom attr”、“dijit/form/RadioButton”,
“dojo/dom风格”、“dijit/layout/ContentPane”、“dijit/layout/StackContainer”,
“tcs/Log”],
函数(ready、declare、_WidgetBase、domConstruct、,
lang,on,attr,单选按钮,
样式、内容窗格、堆栈容器、,
日志){
/**
*@级
*@name gijit.workflow.debug.combi
*/
返回declare(“gijit.workflow.debug.combi”,[\u WidgetBase]{
工作流:空,
窗格:空,
宽度:“600px”,
高度:“400px”,
_调用前:函数(d){
警报(“呼叫前”);
},
buildRendering:function(){
this.domNode=domConstruct.create(“div”,{id:“myform”});
var contain=domConstruct.create(“div”,null,this.domNode,“last”);
var stackContainer=新的stackContainer({
样式:“高度:”+this.height+“宽度:”+this.width+“边框:0px纯红”
},包含);
var buttons=domConstruct.create(“form”,null,this.domNode,“first”);

对于(var i=0;i如果以编程方式将子小部件添加到小部件,则需要定义启动子小部件的启动函数。然后,每当在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);
});

将小部件子类设置为ContentPane而不是_WidgetBase来解决此问题,因为ContentPane知道如何调整自身大小

也看到