Javascript Dojo：我可以向同一个BorderContainer区域添加两个或多个小部件吗？

请容忍我，因为我对dojo、javascript和web编程基本上是新手

在我正在处理的web页面的一部分中，我有一个BorderContainer（在TabContainer中，它在另一个BorderContainer中，但我认为这与问题无关），我想在其中放置一些小部件

我在BorderContainer上使用“headline”设计，理想情况下，我希望在中间区域有一个ContentPane，在底部区域有一个文本框和四个按钮（在BorderContainer的宽度上并排排列）

这可能是一个非常基本的想法，一般来说，我在BorderContainer或Widget后面（甚至在web编程的基本范例中！）都没有这个想法，但我很难让文本框和四个按钮按照我的意愿并排排列

我是否可以在同一区域中放置不同的小部件，而不只是为该区域创建另一个BorderContainer（或其他容器或窗格）？如果是，我将如何实施

下面是创建BorderContainer及其未来组件的一些片段

    //Main BorderContainer
    this.container = new dijit.layout.BorderContainer({
        title: that.name + "_CTR",
        style: "height: 100%",
        design: "headline"
    }, that.name + "_CTR"); 

    //Blank ContentPane in the center region
    this.msgArea = new dijit.layout.ContentPane({
        content: "",
        region: "center"
    }, that.name + "_MSGS");

    //TextBox to be placed in the "bottom" region
    this.textBox = new dijit.form.TextBox({
        value: "",
        placeHolder: "Type a message to publish",
        region: "bottom"
    }, that.name + "_TB");

    //Example of one of my four buttons also to be placed in the "bottom" region
    this.pubButton = new dijit.form.Button({
        region: "bottom",
        label: "Publish",
        showLabel: true,
        onClick: function () { that.publish(); }
    }, that.name + "_PB");

    //Function that adds children to the main BorderContainer and calls startup()
    this.initialize = function () {
        that.container.addChild(that.msgArea);
        that.container.addChild(that.textBox);
        that.container.addChild(that.pubButton);
        that.container.addChild(that.pubButton2);
        that.container.addChild(that.pubButton3);
        that.container.addChild(that.pubButton4);

        that.container.startup();
    };

谢谢你抽出时间

编辑：忘了提一下，如果可能的话，我更喜欢用编程的方式来做这件事

编辑2：非常感谢下面的克雷格！虽然我没有使用您的确切方法，但通过使用dojo.create（尚未转换为1.7…）帮助我了解了更多关于DomNodes的信息（如我所说，我是web编程新手：P），这让我发现不止一个小部件可以取代ContentPane的“内容”属性，只需将其设置为每个小部件的domNode引用数组

    //Create BorderContainer and Buttons as above

    //Create the ContentPane for the bottom region of the BorderContainer
    this.pane = new dijit.layout.ContentPane({
        content: "",
        region: "bottom"
    }, that.name + "_BTM");

    //Add each widget to the ContentPane's "content" by using a DomNodeList
    //Then add the ContentPane to the BorderContainer
    this.initialize = function () {
        that.pane.set("content", [
            that.textBox.domNode, 
            that.button1.domNode,
            that.button2.domNode,
            that.button3.domNode,
            that.button4.domNode
        ]);

        that.container.addChild(that.pane);

        that.container.startup();
    };

这种快速而肮脏的方法可能不适合标记/布局，在这种情况下，我认为您的方法和/或对“innerHTML”的编辑可能会更好，但这正是我目前需要的

---

再次非常感谢，希望我能够提高投票率/提高声誉……

是的，您可以在同一区域放置多个小部件，但中间区域除外。请注意，添加的第一个小部件在区域指定的方向上最远。第一个顶部小部件位于顶部。第一个底部小部件位于底部，依此类推

看看您的示例，我建议将文本框和按钮放入它自己的内容窗格中，然后将窗格放入bordercontainer。bordercontainer将根据屏幕大小调整区域大小，您不希望按钮和文本框改变大小

编辑：

你可以考虑两种技巧来完成评论中所要求的内容。 1） 您可以使用手动构建html，然后使用新创建的domNode实例化小部件

var b1 = new ContentPane({});
var div1 = domConstruct.create('div', {}, b1.containerNode);
// build more html using domConstruct, like a table etc
var btn = new Button({ label: 'My Action 1'}, 
                 domConstruct.create('div', {}, div1)); 

2） 您可以创建一个具有html标记的模板化小部件，然后该小部件负责实例化文本框和按钮

dojo.declare("MyFormLayout", [dijit._Widget, dijit._Templated], {

    //put better html layout in the template
    templateString: '<div><div dojoAttachPoint="btnNode"></div></div>',

    postCreate: function() {
        this.inherited(arguments);
        this.button = new Button({ label: 'My Action 2'}, this.btnNode);
    }
});

appLayout.addChild(new ContentPane({
    region: "bottom",
    content: new MyFormLayout({})
}));

dojo.declare（“MyFormLayout”，[dijit.\u小部件，dijit.\u模板化]{
//在模板中放置更好的html布局
templateString:“”，
后创建：函数（）{
这是继承的（论点）；
this.button=新按钮（{label:'My Action 2'}，this.btnNode）；
}
});
addChild（新内容窗格）({
区域：“底部”，
内容：新的MyFormLayout（{}）
}));

如果标记简单且严格适用于布局，则第一个选项很方便。

---

当有其他为小部件编码的逻辑时，第二个选项工作得很好。这些代码可以放在自定义小部件中。

啊，我想你是对的，我可能必须先将它们添加到单独的ContentPane中。你知道我将如何通过编程实现吗？意思是，如何调用cp.set（“content”，…）并使。。。我的多个小部件而不是一个字符串？