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

Question

Please bear with me as I am new to dojo, javascript, and web programming in general.

In a part of the web page I am working on, I have a BorderContainer (inside of a TabContainer, which is inside of another BorderContainer, but I don't think this is relevant to the issue) and I want to put a number of widgets inside it.

I am using the "headline" design on the BorderContainer and - ideally - I would like to have a ContentPane in the center region and a TextBox and four buttons all in the bottom region (lined up side-by-side across the width of the border container).

This could be a very basic idea that I am missing behind BorderContainers or widgets in general (or even in basic paradigms of web programming!), but I am having trouble getting the TextBox and four buttons to line up side-by-side as I would like.

Is it possible for me to put different widgets in the same region without creating another BorderContainer (or other Container or Pane for that matter) just for that region? If so, how would I implement this?

Here are some snippets of creating the BorderContainer and it's future components.

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

Thank you for your time!

EDIT: Forgot to mention that I would prefer doing this programmatically if possible

EDIT2: Big thanks to Craig below! While I didn't use your exact methods, playing around with dojo.create (haven't converted to 1.7 yet...) helped me learn more about DomNodes (like I said, I'm new to web programming :P), which allowed me to figure out that more than one widget could take the place of the ContentPane's "content" property simply by setting it to an array of domNode references for each widget!

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

This quick and dirty method might not be best for markup/layout, in which case I think your methods and/or editing of the "innerHTML" might work out better, but this is what I needed at the moment.

Many thanks once again, wish I was able to upvote/give reputation....

Answer 1

Yes you can put multiple widgets in the same region, except for the center region. Notice that the first widget added is farthest most in the direction specified by the region. The first top widget is on top. The first bottom widget is on the bottom, and so on.

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

Looking at your example, I would recommend putting the textbox and button into it's own content pane and then putting the pane into the bordercontainer. The bordercontainer will adjust the sizes of the regions based on screen size, and you don't want the button and textbox changing size.

EDIT:

There are two techniques you can consider to accomplish what was asked in the comment.

1) You can use dom-construct to manually build the html and then instantiate a widget using a newly created 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) You can create a templated widget that has the html markup and the widget is then responsible for instantiating the text box and button.

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

The first option is convenient if the markup is simple and strictly for layout. The second option works well when there is other logic that is coded for the widgets. That code can go in the custom widget.