1

我查看了很多链接，供人们尝试添加内容/更改 Dojo 对话框的模板。这是最有希望的。

但是，每当我做这样的事情时：

在 HTML 中声明的对话框：

<div class="djDialog" id="dgViewer" data-dojo-type="TemplatedDialog" data-dojo-props="title: 'My Dialog', draggable:false"></div>

对话框模板：

<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"></span>
        <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1">
            <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
        </span>
    </div>
    <!-- containerNode from original Dialog template -->
    <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">
        <!-- All "custom" content -->
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:300px">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">

            </div>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
                <button data-dojo-type="dijit.form.Button">Edit</button>
                <button data-dojo-type="dijit.form.Button">Status</button>
            </div>
        </div>
        <!-- End "custom" content -->
    </div>
</div>

自定义对话框类：

define([
    'dojo/_base/declare',
    'dijit/Dialog', 
    'dijit/_TemplatedMixin',
    'dojo/text!./dialog_templates/View.html'], 
    function(
        declare, 
        Dialog, 
        _Mixin,
        _template){
    return declare('TemplatedDialog', [Dialog, _Mixin], {    
        templateString : _template,
        constructor : function(){

        }
    })
})

在我的控制台（使用 Chrome）中，我只看到：

<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto; "></div>

...和内容应该在的空节点。

到目前为止，我还没有找到任何人似乎已经成功地扩展了 dijit.Dialog 的模板。这可能吗？

编辑

在尝试了这个模板的一些变化之后：

<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"></span>
        <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1">
            <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
        </span>
    </div>
    <!-- containerNode from original Dialog template -->
    <div class="dijitDialogPaneContent">
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:100%;width:100%">
            <div data-dojo-attach-point="containerNode" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
            <button data-dojo-type="dijit.form.Button">Edit</button>
        </div>
    </div>
</div>

错误Uncaught TypeError: Cannot read property '0' of undefined被抛出。这是堆栈，如果有帮助的话。我正在使用来自 Google CDN 的未压缩版本来帮助调试。

_childElements          dojo.js.uncompressed.js:8341
getStepQueryFunc        dojo.js.uncompressed.js:8597
query                   dojo.js.uncompressed.js:9005
query                   dojo.js.uncompressed.js:5248
_2._checkIfSingleChild  _ContentPaneResizeMixin.js:2
_4._size                Dialog.js:2
_4.show                 Dialog.js:2

删除data-dojo-typeand解决-props了containerNode这个问题，但它仍然没有让事情更接近于拥有一个工作的自定义模板化对话框。

4

1 回答 1

4

在内容窗格上进行模板化的原因是，无论您放入使用附加点'containerNode'引用的 domNode 中的任何模板内容，您都会在启动时松动。

如果没有设置 'href' 和 'content' 属性，它们将被简单地设置为一个空字符串，从而留下Dialog.containerNode.innerHTML == ""

您无需从 _TemplatedMixin 派生，因为 Dialog 本身就是一个模板化的小部件。而是将其更改为 _WidgetsInTemplateMixin 以补偿 BorderContainer 布局小部件和您的 dijit.form 内容。此外，您在自定义模板中的标记应该是预先要求的，因此您可以在此处使用类似的内容：

将模板从容器的旧附加点更改为此

<div data-dojo-attach-point="containerNode" 
     data-dojo-type="dijit.layout.ContentPane"
     data-dojo-props="region:'center'">

然后将要求添加到模板中的标记小部件以及_WidgetsInTemplateMixin：

define(["dijit/Dialog",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./dialog_templates/View.html",
    // rest are for rendering example
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button"
}. ... );

结果应该与此类似，记住您的模板 View.html 更改：

define([
    'dojo/_base/declare',
    'dijit/Dialog', 
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./dialog_templates/View.html",
        // rest are for rendering example
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button"], 
    function(
        declare, 
        Dialog, 
        _Mixin,
        _template){
    return declare('TemplatedDialog', [Dialog, _Mixin /*careful, widgetsintemplate is tricky*/ ], {    
        templateString : _template
    })
})

你可以在这里摆弄

编辑：

由于包含边框布局的对话框存在问题（无论如何都不是闻所未闻），因此有一个解决方法：

    _checkIfSingleChild: function() {
        delete this._singleChild;
       domClass.toggle(this.containerNode, this.baseClass + "SingleChild", !!this._singleChild);

    },
    templateString: '....'

我不确定后果，我认为如果您尝试以编程方式更改其内容和尺寸，您的边框布局可能会开始行为不端。但它会呈现 - 至少在这里会呈现：更新的小提琴

于 2012-06-24T16:55:45.100 回答