Dojo tabContainer 未正确显示 Dojo 控件

Posted 2023-02-16

【中文标题】Dojo tabContainer 未正确显示 Dojo 控件

【英文标题】：Dojo tabContainer doesn't show Dojo controls properly

【发布时间】：2012-01-04 04:40:00

【问题描述】：

我正在尝试使用 Dojo 工具包编写一个复杂的应用程序， 主屏幕包含：左侧主菜单，即 Dojo 手风琴，顶部条带和主页面，即 tabContainer，每次点击左侧菜单时都会打开一个新选项卡，

我尝试在新选项卡内容中显示一个外部页面，该页面包含其他 Dojo 控件，例如 Grid (EnhancedGrid)、Dojo 表单控件等。

问题是Dojo控件不渲染tabContainer下的Dojo控件

这里是每次左击打开一个新标签（页面）的主要功能：

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

这里是 html（包含 Dojo 功能）：

<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> 

【问题讨论】：

考虑到我自己对 dojo 的简短而可怕的经历，我认为错误与 css 有关。我建议你找到一个实现类似于你正在尝试的东西的页面并查看那里使用的 css

【参考方案1】：

您没有在您的问题中提供足够的信息让我轻松运行测试或确定以下答案，但从您写的内容来看，我相当有信心您的问题是 Dojo 解析器之一未运行在您动态生成的窗格的内容上。虽然我无法从您提供的代码中看出，但这是一个非常常见的配置，Dojo 解析器在第一次加载页面时只运行一次，如果您没有做任何事情来改变这种行为，这可能是您的问题。

基本上，在内容窗格数据加载完成后，您会想要执行以下操作：

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

（假设内容窗格数据根的id 是main，如上例所示，并且您已经需要parser 和dom。）

请查看Dojo Parser documentation（您可能需要向下滚动到 Parser API 说明以查看感兴趣的区域）以查看如何执行此操作的示例。您可以进一步查看Dojo ContentPane documentation，了解如何在内容窗格完成下载时锁定回调。

希望这会有所帮助。