Dojo:我可以将两个或多个小部件添加到同一个边界容器区域吗?

Dojo: Can I add two or more widgets to the same BorderContainer region?

本文关键字：边界 同一个 添加 区域 我可以 Dojo 两个 小部      更新时间：2023-09-26

请耐心等待，因为我是道场、javascript 和 Web 编程的新手。

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

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

这可能是一个非常基本的想法，我在 BorderContainers 或小部件后面（甚至在 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"可能会更好，但这是我目前需要的。

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

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

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

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

编辑：

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

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

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

相关文章：