Question

Is there a way to create a layout using dijit’s BorderContainer and ContentPane using existing HTML/markup and avoiding the use of dojo/parse’s .parse() method?

I am trying to use RequireJS with the latest code in dojo/dijit’s svn trunk but can’t use .parse() as it relies on the require.on method that doesn’t exist in RequireJS.

Note that I have an existing template and cannot programatically create the BorderContainer unless it takes a parameter to set an existing element (that also has existing content which cannot be altered/removed).

Answer 1

Yes, all widgets can be created programmatically. That’s what dojo/parser does internally.

As an example:

require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/TabContainer"], function(ready, BorderContainer, ContentPane, TabContainer){
    ready(function(){
        // create a BorderContainer as the top widget in the hierarchy
        var bc = new BorderContainer({style: "height: 500px; width: 800px;"});

        // create a ContentPane as the left pane in the BorderContainer
        var cp1 = new ContentPane({
            region: "left",
            style: "height: 100px",
            content: "hello world"
        });
        bc.addChild(cp1);

        // create a TabContainer as the center pane in the BorderContainer,
        // which itself contains two children
        var tc = new TabContainer({region: "center"});
        var tab1 = new ContentPane({title: "tab 1"}),
        tab2 = new ContentPane({title: "tab 2"});
        tc.addChild( tab1 );
        tc.addChild( tab2 );
        bc.addChild(tc);

        // put the top level widget into the document, and then call startup()
        document.body.appendChild(bc.domNode);
        bc.startup();
    });
});