Dojo tabContainer doesn't show Dojo controls properly

Question

I'm trying to write a complex application using Dojo toolkit, The main screen contains: left main menu which is Dojo accordion, top strip and main page which is tabContainer that opened a new tab every hit on left menu,

I try to show in the new tab content an external page that contains other Dojo controls such a Grid (EnhancedGrid), Dojo form control's etc.

The problem is that the Dojo controls doesn't render the Dojo controls under tabContainer

Here the main function that opened a new tab (page) with every left hit:

dojo.addOnLoad(function() {
    var opened = {};
    dojo.forEach(dojo.query("#leftAccordion a"), function(aTag) {
        dojo.connect(aTag, 'onclick', null, function(e) {
            dojo.stopEvent(e);
            var tabs = dijit.byId("topTabs");
            var pane = opened[aTag.href];
            if (!pane)
            {  
                pane = new dijit.layout.ContentPane({
                    title: aTag.title,
                    closable: true,
                    href: aTag.href, 
                    onClose: function() {
                        opened[aTag.href] = null;
                        return true;
                    }
                });
                opened[aTag.href] = pane; 
                tabs.addChild(pane);
            }
            tabs.selectChild(pane);
        });
    });
});

Here the HTML (Contains Dojo features):

<div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="liveSplitters:false, design:'sidebar'">
        <div id="header" data-dojo-type="dijit.MenuBar" data-dojo-props="region:'top'">
            <div data-dojo-type="dijit.MenuBarItem"  data-dojo-props="iconClass:'dijitIconDelete'" data-dojo-props="onclick: function(){ alert('no submenu, just a clickable MenuItem'); }">
                שולחן עבודה
            </div>
            <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="onclick: function(){ alert('no submenu, just a clickable MenuItem'); }">
                משימות
            </div>

                        <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="onclick: function(){ alert('no submenu, just a clickable MenuItem'); }">
                התנתק
            </div>
        </div>

        <div data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading', splitter:true, minSize:20, minSize: 100, maxSize:300" style="width: 200px;" id="leftAccordion">
            <?php
            $opened = FALSE;
            foreach($menues as $menu)
            {
                if ($opened == TRUE && $menu->parent == 0)
                {
                    print '</ul>' . "\n";
                    print '</div>' . "\n";
                    $opened = FALSE;
                }

                if ($opened == FALSE && $menu->parent == 0)
                {
                    print "<div data-dojo-type=\"dijit.layout.ContentPane\" data-dojo-props=\"title:'$menu->title'\">" . "\n";
                    print ' <ul>' . "\n";
                    $opened = TRUE;
                }
                else{
                    $url = $this->config->slash_item('index_url') . $menu->url;
                    print "     <li><a href=\"$url\" title=\"$menu->title\">$menu->title</a></li>" . "\n";
                }
            }
            if ($opened == TRUE)
            {
                print ' </ul>' . "\n";
                print '</div>' . "\n";
            }
            ?>

        </div><!-- end AccordionContainer -->

        <!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->
        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">

            <div id="basicFormTab" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Basic Form Widgets', style:'padding:10px;display:none;'">

            </div>
        </div><!-- end of region="center" TabContainer -->
    </div>

Considering my own brief and terrifying experiences with dojo I would assume the error is to do with css. I suggest you find a page that implements something similar to what you are trying and view the css used there — Sheena, Jun 29 '12 at 14:33

score 0 · Answer 1 · answered Jul 12 '16 at 14:56

You didn't provide enough information in your question for me to readily run a test or be sure of this following answer, but from what you write I'm fairly confident that your problem is one of the Dojo parser not being run on the contents of the pane you're dynamically generating. While I can't tell from the code you provided, it's a pretty common configuration for the Dojo parser getting run just once when page is first loaded, and if you haven't done anything to change this behavior it's probably your issue.

Basically, after the loading of that content pane data has completed, you're going to want to do something like:

parser.parse(dom.byId("main"));

(assuming that the id of the root of that content pane data is main, as it is in the example above, and that you've already required parser and dom.)

Please take a look at the Dojo Parser documentation (you may have to scroll down to the Parser API Notes to see the area of interest) to see examples of how to do this operation. You can look further in the Dojo ContentPane documentation to see how to latch onto a callback for when the content pane has finished downloading.

Hope this helps.

Dojo tabContainer doesn't show Dojo controls properly

1 Answers1