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

Question

请多多包涵，因为我是 dojo、javascript 和一般网络编程的新手。

在我正在处理的网页的一部分中，我有一个 BorderContainer（在 TabContainer 内，在另一个 BorderContainer 内，但我认为这与问题无关），我想把里面有很多小部件。

我在 BorderContainer 上使用“标题”设计 - 理想情况下 - 我希望在中心区域有一个 ContentPane，在底部区域有一个 TextBox 和四个按钮（并排排列在边框容器的宽度）。

这可能是一个非常基本的想法，我在 BorderContainers 或一般小部件（甚至在 Web 编程的基本范式中）缺少它，但我无法让 TextBox 和四个按钮并排排列 -随心所欲。

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

这里有一些创建 BorderContainer 及其未来组件的 sn-ps。

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

感谢您的宝贵时间！

编辑：忘了提到，如果可能的话，我更喜欢以编程方式进行此操作

EDIT2：非常感谢下面的克雷格！虽然我没有使用您的确切方法，但使用 dojo.create （尚未转换为 1.7...）帮助我了解了有关 DomNodes 的更多信息（就像我说的，我是网络编程的新手：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”的编辑可能会更好，但这是我目前需要的。

再次非常感谢，希望我能够投票/给予声誉....

Answer 1

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

http://jsfiddle.net/cswing/ssDXh/

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

编辑：

您可以考虑两种技术来完成评论中提出的问题。

1) 您可以使用dom-construct 手动构建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({})
}));

如果标记简单且严格用于布局，则第一个选项很方便。 当有为小部件编码的其他逻辑时，第二个选项效果很好。该代码可以放在自定义小部件中。