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

问题描述

这是我要创建的小部件。目标是让顶部的单选按钮控制一个stackContainer。

This is the widget I am trying to create. The goal is to have a stackContainer controlled by radio buttons at the top.

我已经在dojo文档中尝试了这个例子，但它有同样的错误行为。 p>

I have tried the example in the dojo documentation, but it has the same errant behavior.

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

在很大程度上它是有效的。但为了得到任何显示，我必须调整窗口大小。所有reisizing /启动呼叫最初都没有起作用后添加，但是没有任何一个。

For the most part, it works. But in order to get anything to display I have to resize the window. All the reisizing/startup calls were added after it initially didn't work, but none of them do anything.

推荐答案

如果以编程方式将子窗口小部件添加到窗口小部件中，则需要定义启动子窗口小部件的启动函数。那个启动函数然后应该被调用，每当一个新的实例被创建并放置在dom中。例如：

If you are programmatically adding child widgets to your widget, you need to define a startup function that starts up the child widgets. That startup function then should be called whenever a new instance is created and placed in the dom. For example:

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);
});

这篇关于Dojo stackContainer在窗口调整大小之前不显示子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！