Виджет Dojo не отображается правильно, когда помещен в неактивный аккордеонный контейнер

1

У меня есть веб-приложение, использующее API-интерфейс ArcGIS JS с кучей пользовательских виджетов. Если я esri/dijit/editing/TemplatePicker внутри ContentPane внутри вкладки контейнера Accordion, которая неактивна, когда страница загружается, сборщик шаблонов не отображает правильно.

Действия по воспроизведению:

  1. Загрузите скрипку (http://jsfiddle.net/n9jwtgko/1/)
  2. Переключитесь на первую панель аккордеона. Виджет - это только граница без содержимого

  3. Теперь измените выбранную панель с помощью selected="true" настроек selected="true"

    <div data-dojo-type="dijit/layout/ContentPane" title="Heeh, this is a content pane" selected="true">
    <div id="templatePickerDiv"></div>
</div>
  4. remove selected="true" из второго контейнера
  5. обновить скрипку

Теперь виджет загружается правильно.

Что именно происходит здесь и как я могу обойти это?

Теги:
widget
dojo
arcgis
arcgis-js-api

3 ответа

0
Лучший ответ

Проблема действительно кажется либо шаблоном, либо Аккордеоном. Если я удалю либо из приложения, он работает отлично, поэтому мой план состоял в том, чтобы убедиться, что синтаксический анализатор работает только после того, как все закончилось - включая такие события, как layers-add-result.

Так как мое приложение уже модулизовано в mapLoader, виджеты, службы и т.д., Я решил реорганизовать mapLoader в объект с отложенными данными.

define([/*...*/, function(){
    var init = function() {
       return $.when(function(){
                 //bootstrap map
                 //bootstrap widgets
                 //create new Deferred object
                 var dfd = $.Deferred();
                 function initEditing() {
                    /*hook up the rest*/
                    //resolve promise once the templatepicker is up and running
                    dfd.resolve();
                 }
                 //return promise
                 return dfd.promise();
              })
    };
    return {init: init}
}])

Теперь с этим я могу просто зайти в свой файл автозагрузки и позвонить:

define([
    "dojo/parser",
    "app/components/mapLoader.public",
    "dojo/domReady!"
], function (parser, MapLoader
) {
     //entry point into the application
     //authentication, configuration etc. omitted

     MapLoader.init().done(function () {
        parser.parse();
     });
});

Это единственный способ, который я нашел до сих пор, чтобы убедиться, что каждый виджет загружен, прежде чем парсер действительно работает и выполняет свою черную магию. Of Ccourse теперь мне просто нужно очистить все и заменить jQuerys defferred object на реализацию dojo.

Поделиться
1

Иногда, когда я использую "Додзё", я меняю вещи и работаю, но я не знаю, почему. Он работает таким образом. Часть parse.parse() запускается после окончания кода.

Вот скрипка

parser.parse();
Поделиться
  • 0
    Хотя это может сработать, это не гарантирует работу, потому что вам, возможно, придется подождать, пока произойдут события. Я нашел последовательное решение своей проблемы и скоро опубликую ответ.
0

По завершении взгляните на файл HTML (с autoSelect = true и без), я вижу, что без autoselect = true ваша сетка не получает правильную ширину. Это HTML-версия сетки. Если вы видите элемент "dojoxGridHeader", ширина равна 0px, но где, как и при autoselect = true, оно станет "width = 178px". Поэтому проверьте свой CSS, также вы можете также grid.startup(), когда этот контейнер контейнера загружен. Надеюсь, поможет.

<div hidefocus="hidefocus" role="grid" dojoattachevent="onmouseout:_mouseOut" tabindex="0" class="dojoxGrid grid" id="dojox_grid_DataGrid_0" align="left" widgetid="dojox_grid_DataGrid_0" aria-readonly="true" style="height: auto; width: 1px; user-select: none;">
    <div class="dojoxGridMasterHeader" dojoattachpoint="viewsHeaderNode" role="presentation" style="display: block; height: 0px;"><div class="dojoxGridHeader" dojoattachpoint="headerNode" role="presentation" style="display: none; width: 0px; left: 1px; top: 0px;">
        <div dojoattachpoint="headerNodeContainer" style="width:9000em" role="presentation">
            <div dojoattachpoint="headerContentNode" role="row"><table class="dojoxGridRowTable" border="0" cellspacing="0" cellpadding="0" role="presentation"><tbody><tr><th tabindex="-1" aria-readonly="true" role="columnheader" id="dojox_grid_DataGrid_0Hdr0" class="dojoxGridCell " idx="0" style="width:6em;"><div class="dojoxGridSortNode">cell0</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="dojox_grid_DataGrid_0Hdr1" class="dojoxGridCell " idx="1" style="width:6em;"><div class="dojoxGridSortNode">cell1</div></th></tr><tr><th tabindex="-1" aria-readonly="true" role="columnheader" id="dojox_grid_DataGrid_0Hdr2" colspan="2" class="dojoxGridCell " idx="2" style=""><div class="dojoxGridSortNode">groupName</div></th></tr></tbody>
Поделиться
  • 0
    Меня не очень беспокоит ширина, но функциональность самого виджета и причина этого. Я всегда могу настроить стиль позже.
  • 0
    хорошо, если у вас не установлена правильная ширина, то сетка не будет отображаться. Он устанавливает правильную ширину, когда вы делаете этот контейнер соответствия выбранным, устанавливая autoSelect = true

Ещё вопросы

Сообщество Overcoder
Наверх
Меню