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

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

感谢您的时间!

编辑:忘记提及我希望如果可能的话以编程方式执行此操作

编辑2:非常感谢下面的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({})
}));

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