Dojo小部件放置在非活动可折叠容器中时未正确呈现

wd2eg0qa  于 2022-12-16  发布在  Dojo
关注(0)|答案(3)|浏览(129)

我有一个使用ArcGIS JS API的Web应用程序,其中包含一系列自定义微件。如果我将esri/dijit/editing/TemplatePicker放置在Accordion容器选项卡中的ContentPane内(该选项卡处于非活动状态),则当页面加载时,模板选取器无法正确呈现。
重现步骤:
1.加载提琴(http://jsfiddle.net/n9jwtgko/1/
1.切换到第一个折叠面板。该小部件只是一个边框,没有任何内容
1.现在通过设置selected="true"更改选定窗格

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

1.从第二个容器中取出selected="true"
1.使小提琴恢复活力
小部件现在可以正确加载。
这里到底发生了什么?我该如何解决这个问题?

qoefvg9y

qoefvg9y1#

有时候当我使用“Dojo”时,我改变了一些东西,但我不知道为什么。它是这样工作的。“parse.parse()”部分在代码结束后运行。
Here is fiddle

parser.parse();
6l7fqoea

6l7fqoea2#

仔细查看HTML文件后(autoSelect=true和without),我可以看到,如果没有autoSelect=true,您的网格没有得到正确的宽度。这是HTML版本的网格。如果您看到元素'dojoxGridHeader',宽度是0px,但与autoSelect=true一样,它将变成“width= 178px”。2所以检查你CSS,当雅阁的容器加载时,你也可以使用grid.startup()。3希望能有所帮助。

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

bmvo0sr53#

问题似乎真的出在templatepicker或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();
     });
});

到目前为止,这是我找到的唯一一种方法,可以确保在解析器实际运行并执行其黑魔法之前加载每个小部件。当然,现在我只需要清理所有内容,并用Dojo实现替换jQuerys的deferred对象。

相关问题