在Dojo对话框中的空TabContainer

Question

问题是虽然给出selected="true"，但在打开后Dialog内的TabConainer是空的（参见下面的屏幕截图）。使用dojo / html html.set(node, contentHTML, {parseContent: true});

调用内容

当通过点击另一个标签来更改标签时，会显示内容并且类别为＃34; dijitVisible＆＃34;为此div设置，因为它应该从头开始。属性nested="true"是必需的，否则tabContainer上会显示三个选择条。

我该怎样做才能让内容从一开始就出现？

<div data-dojo-type="dijit/Dialog" id="formDialog" data-dojo-id="formDialog" title="Edit member data">
    <div id="formContent" class="dijitDialogPaneContentArea" data-dojo-attach-point="formContent">
    </div>
</div>

更新

以下是获取内容的整个javascript

getForm = function(formID, urlAction){

    var contentHTML;
    var xhrArgs = {
        url: urlAction,
        handleAs: "text",
        load: function(data){
            contentHTML = data;
        },
        error: function(error){
            contentHTML = text_error_unexpected + ": " + error;
        },
        handle: function(error, ioargs){
            var node = dom.byId(formID);
            html.set(node, contentHTML, {parseContent: true});
        }
    }

    var deferred = dojo.xhrGet(xhrArgs);
};

更新2： 这是被调用并插入上面的div＆＃34; formContent＆＃34; （我认为我的描述尽可能简单，并且在途中丢失了一些细节）

<div id="form" data-dojo-type="dijit/form/Form" data-dojo-attach-point="form" encType="multipart/form-data" action="#">
    <div style="width: 450px; height: 370px;">
        <div data-dojo-type="dijit/layout/TabContainer" nested="true">
            <div data-dojo-type="dijit/layout/ContentPane" title="Personal data" selected="true">
                Content 1
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="Detailed data">
                Content 2
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="Contact data">
                Content 3
            </div>
        </div>
    </div>
</div>

Answer 1

在将对话框添加到对话框后，您是否尝试过调用dialog.resize（）或tabcontainer.layout（）？

Answer 2

我不确定以下代码如何将内容放在第一个ContentPane（title =“个人数据”）中。我假设参数formID = "form"

html.set(node, contentHTML, {parseContent: true});

我可以建议改变。 在内容窗格中使用 id ，如下所示。

<div id="content1" data-dojo-type="dijit/layout/ContentPane" title="Personal data" selected="true">
Content 1
</div>

然后使用dijit / registry在句柄函数调用中获取contentpane小部件，如下所示。

handle: function(error, ioargs){
          var content= registry.bId(formId); // over here formId = "content1"
          content.set("content","<p>This is content for <b>Personal Data</b></p>");
          //content.set("content", contentHTML);

}

编辑1
这可能是一种可能的解决方案 @Richard曾建议使用dialog.resize（），我确实尝试将其放在html.set代码之后，但它不起作用。
我注意到html.set需要一些时间来执行，而dialog.resize（）不起作用，因为它是 在html.set电话完成之前致电 html.set也使问题复杂化，因为它没有提供任何句柄（promise对象）来告诉我们何时完成执行。
所以下面的解决方案使用 setTimeout 调用来延迟dialog.resize（）的执行。因此，建议根据一些实际的UI测试来确定延迟时间的值 修改后的代码。

handle: function(error, ioargs){
            var node = dom.byId(formID);
            html.set(node, contentHTML, {parseContent: true});
            var dialog = registry.bId("formDialog");
            setTimeout( function(){
                dialog.show();
                dialog.resize();
            },2000) // time delay of 2 seconds
}