tags:

views:

19

answers:

0

I'm very new to Dojo, so please don't beat me up.

What I want to do is create a window like Child layout test:

<div dojotype="dojox.layout.FloatingPane" title="Child layout test" style="width:400px; height:300px;" resizable="true">
    <div dojotype="dijit.layout.TabContainer">
        <div dojotype="dijit.layout.ContentPane" title="Tab 1">
            First Page
        </div>
        <div dojotype="dijit.layout.ContentPane" title="Tab 2">
            <div dojotype="dijit.layout.TabContainer">
                <div dojotype="dijit.layout.ContentPane" title="Sub-tab 1">
                    Story of Paul.
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Sub-tab 2">
                    Story about Paul.
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Sub-tab 3">
                    Story about... guess who.
                </div>
            </div>
        </div>
    </div>
</div>

programatically, i.e.

dojo.addOnLoad(function () {


    dojo.require("dojox.layout.FloatingPane");

    var fp = new dojox.layout.FloatingPane({
        title: "Child layout test",
        resizable: true,
        dockable: true,
        style: "position:absolute;top:0;left:0;width:700px;height:550px;visibility:hidden;",
        id: "aFloatingPane"
    });

    /* what next? */

});

Do I really have to generate an XML snippet and inject it to the FloatingPane, or can I use something like the following?

    dojo.require('dijit.layout.TabContainer');
    var tc = new dijit.layout.TabContainer({
        style: 'height: 100%; width: 100%;'
    });

    // now add some tabs to tc,
    // then add tc to fp (how?!)

Where can I find documentation or tutorials on this?