Dojo tabContainer неправильно отображает элементы управления Dojo

Я пытаюсь написать сложное приложение с использованием набора инструментов Dojo. Главный экран содержит: левое главное меню, которое представляет собой аккордеон Dojo, верхнюю полосу и главную страницу, которая является tabContainer, которая открывала новую вкладку при каждом нажатии в левом меню,

Я пытаюсь показать в содержимом новой вкладки внешнюю страницу, содержащую другие элементы управления Dojo, такие как Grid (EnhancedGrid), элементы управления формы Dojo и т. Д.

Проблема в том, что элементы управления Dojo не отображают элементы управления Dojo в tabContainer.

Вот основная функция, которая открывала новую вкладку (страницу) при каждом левом ударе:

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 dojox.grid dojox.grid.datagrid
person Shlomi Elbaz    schedule 04.01.2012    source источник
comment
Учитывая мой короткий и ужасающий опыт работы с додзё, я бы предположил, что ошибка связана с css. Я предлагаю вам найти страницу, которая реализует что-то похожее на то, что вы пытаетесь, и просмотреть используемый там css   -  person Sheena    schedule 29.06.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы не предоставили достаточно информации в своем вопросе, чтобы я мог легко запустить тест или быть уверенным в следующем ответе, но, судя по тому, что вы пишете, я вполне уверен, что ваша проблема связана с тем, что синтаксический анализатор Dojo не запускается для содержимого панели, которую вы создаете динамически. Хотя я не могу сказать по предоставленному вами коду, это довольно распространенная конфигурация, когда парсер Dojo запускается только один раз при первой загрузке страницы, и если вы ничего не сделали для изменения этого поведения, это, вероятно, ваша проблема.

По сути, после того, как загрузка данных панели содержимого завершится, вам нужно будет сделать что-то вроде:

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

(при условии, что id корня данных этой панели содержимого - это main, как в приведенном выше примере, и что вам уже потребовались parser и dom.)

Ознакомьтесь с документацией по парсеру Dojo (возможно, у вас прокрутите вниз до заметок Parser API Notes, чтобы увидеть интересующую область), чтобы увидеть примеры того, как выполнить эту операцию. Дополнительную информацию о том, как зафиксировать обратный вызов, когда панель содержимого завершит загрузку.

Надеюсь это поможет.

person Feneric    schedule 12.07.2016