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

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

2 个答案: