当放置在非活动手风琴容器中时，Dojo 小部件未正确呈现

Question

我有一个使用 ArcGIS JS API 和一堆自定义小部件的 Web 应用程序。如果我在 Accordion 容器选项卡内的 ContentPane 中放置一个 esri/dijit/editing/TemplatePicker，当页面加载时，该选项卡处于非活动状态，模板选择器无法正确呈现。

重现步骤：

加载fiddle (http://jsfiddle.net/n9jwtgko/1/)
切换到第一个手风琴窗格。小部件只是一个没有内容的边框

现在通过设置更改选定的窗格selected="true"

<div data-dojo-type="dijit/layout/ContentPane" title="Heeh, this is a content pane" selected="true">
    <div id="templatePickerDiv"></div>
</div>

从第二个容器中删除 selected="true"
刷新fiddle

小部件现在可以正确加载。

这里到底发生了什么，我该如何解决这个问题？

Answer 1

仔细查看 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>

Answer 2

有时当我使用"Dojo"时，我会改变一些东西并工作，但我不知道为什么。它以这种方式工作。 "parse.parse ()"部分是代码结束后的运行。

Here is fiddle

parser.parse();

Answer 3

问题似乎真的出在模板选择器或 Accordion 上。如果我从应用程序中删除其中任何一个，它就可以正常工作，所以我的计划是确保解析器仅在一切完成后运行——包括像 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();
     });
});

这是迄今为止我发现的唯一一种确保在解析器实际运行并执行其黑魔法之前加载每个小部件的方法。当然，现在我只需要清理所有内容并将 jQuerys 延迟对象替换为 dojo 实现。

当放置在非活动手风琴容器中时，Dojo 小部件未正确呈现

Dojo widget not rendered correctly, when placed in inactive accordion container

javascript

dojo

widget

arcgis

arcgis-js-api