代码之家 › 专栏 › 技术社区 › jamesSampica

扩展对话框时“this.domNode为空”

dojo javascript

jamesSampica · 技术社区 · 10 年前

我正在尝试使用与dialog相同的templateString设置自定义对话框,但添加 <div><div data-dojo-type="dijit/layout/ContentPane">Custom</div></div> 进入内容区域。

require([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-construct",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/Dialog"
], function (declare, lang, domConstruct, _WidgetsInTemplateMixin, Dialog) {
    var CustomDialog = declare([Dialog, _WidgetsInTemplateMixin], {
        templateString: 
            '<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">'+
                '<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">'+
                    '<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"'+
                              'role="heading" level="1"></span>'+
                    '<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel"'+
                        'title="${buttonCancel}" role="button" tabindex="0">'+
                        '<span data-dojo-attach-point="closeText" class="closeText"'+ 'title="${buttonCancel}">x</span>'+
                    '</span>'+
                '</div>'+
               ' <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">'+
                    '<div><div data-dojo-type="dijit/layout/ContentPane">Custom</div></div>'+
                '</div>'+
            '</div>' ,
        constructor: function (args, srcNodeRef) {
            lang.mixin(this, args);
        },
    });  

    var div = domConstruct.toDom("<div id='saveMapWidget'></div>");
    domConstruct.place(div, document.body);    
    var widget = new CustomDialog({}, div);
    widget.startup();
    widget.show();
});

Here's the JSFiddle

运行此代码给我 TypeError: this.domNode is null

正在删除 _WidgetsInTemplateMixin 使其正常工作。为什么模板小部件会导致中断?

1 回复 | 直到 10 年前

Ken Franqueiro 10 年前

我编辑了我的回复,因为虽然我最初的回复是一个有效的观点,但正如Shoe指出的,这并不是导致问题的原因。很抱歉。

我已经更仔细地了解了这一点。发生的是你的内心 ContentPane 实际上是在对话框启动之前被销毁的做试图启动,它试图启动已经被摧毁的 内容窗格 。然而,被破坏的小部件具有 domNode 引用无效,以及 内容窗格 查看 domNode.parentNode 在其 startup 函数,这会导致错误。

IIUC,小部件被过早破坏的原因首先是因为您的对话框在 buildRendering ,然后紧接着 build渲染 在里面 _applyAttributes 这个 content 设置器 Dialog 最后用最初解析的内容调用,这最终会破坏最初解析的属性。实际上,通过尝试使用 _WidgetsInTemplateMixin 在这里如果您在 containerNode (哪个节点 内容窗格 特别是解析)。

FWIW,当我需要在对话框中放置自定义小部件时,我不喜欢摆弄整个对话框的模板,所以我采取相反的方法-我开发自定义小部件,然后简单地设置对话框的 所容纳之物 到该自定义小部件的实例。这对你来说可能是一个更直接的方法。

以下是小部件作为内容方法的示例: http://jsfiddle.net/ddLp24wg/

原始响应

你在打电话 启动,启动 在对话框实际位于文档流中之前,并且其中一个子窗口小部件不期望这样做。小部件的 启动,启动 方法只应在小部件的DOM位于文档流中时调用,如 启动,启动 是创建生命周期中可以执行维度敏感逻辑的一个API。

在Dialogs的情况下, 启动,启动 将在第一次自动调用 show 无论如何都会被调用(因为在那之前它不应该在流中),所以您根本不需要自己调用它。

此外,我不确定您是否只是测试到目前为止,但是否要扩展模板以添加 内容窗格 那太过分了- 对话 已扩展 内容窗格 首先,你基本上已经有了一个。