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-typeとこれ-propsはcontainerNode解決されますが、カスタムのテンプレート化されたダイアログを機能させるにはまだ近づいていません。

4

1 に答える 1

4

contentpane でテンプレートを作成する際の問題の理由は、attach-point 'containerNode'で参照される domNode に入れるテンプレート コンテンツが何であれ、起動時に失われることです。

「href」または「content」属性が設定されていない場合、それらは単に空の文字列に設定されるため、Dialog.containerNode.innerHTML == ""

ダイアログ自体はテンプレート化されたウィジェットであるため、_TemplatedMixin から派生させる必要はありません。代わりに、これを _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 に答える