Question

请耐心等待我，因为我是dojo，javascript和web编程的新手。

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

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

这可能是一个非常基本的想法，我一般都缺少BorderContainers或小部件（或者甚至是网络编程的基本范例！），但是我无法获得TextBox和四个按钮排列在一起 - 我希望如此。

我是否可以在同一区域放置不同的小部件而不为该区域创建另一个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();
    };

感谢您的时间！

编辑：忘记提及我希望在可能的情况下以编程方式执行此操作

EDIT2：非常感谢下面的Craig！虽然我没有使用你的确切方法，但是玩dojo.create（还没有转换为1.7 ......）帮助我学习了更多关于DomNodes的信息（就像我说的，我是网络编程的新手：P），这让我可以理解，只需将多个小部件设置为每个小部件的domNode引用数组，就可以取代ContentPane的“content”属性！

    //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/

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

编辑：

您可以考虑使用两种技术来完成评论中提到的内容。

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

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

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

1 个答案: