Inhoud toevoegen aan dijit Dialog

I've looked at quite a few links for people trying to add content/change the template for a Dojo Dialog. This was the most promising.

Wanneer ik echter zoiets doe als dit:

Dialoog gedeclareerd in HTML:

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

Dialoogsjabloon:

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
        
        
            x
        
    </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>

Aangepaste dialoogklasse:

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(){

        }
    })
})

In mijn console (met Chrome) zie ik net:

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

... en een leeg knooppunt waar inhoud moet zijn.

Tot dusver heb ik niemand gevonden die met succes dijit.Dialog succesvol heeft uitgebreid in termen van sjablonen. Is dit mogelijk?

Bewerken

Na het proberen van enkele variaties op deze sjabloon:

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
        
        
            x
        
    </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>

De fout Uncaught TypeError: Can not read eigenschap '0' van undefined wordt gegooid. Dit is de stapel, als het helpt. Ik gebruik de niet-gecomprimeerde versie van het Google CDN om te helpen bij foutopsporing.

_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

Het verwijderen van het data-dojo-type en -props van de containerNode lost dit op, maar het komt er nog steeds niet op aan om een ​​werkend aangepast sjabloon te hebben Dialog.

 1
toegevoegd bewerkt
Bekeken: 1
de bron
ja ru es de

1 antwoord

Reden voor problemen met het doen van sjabloneren op een inhoudspaneel is dat, welke sjabloon-inhoud dan ook die u in de domNode plaatst waarnaar wordt verwezen met het hechtingspunt 'containerNode' , u bij het opstarten zult verliezen.

If there is no 'href' nor 'content' attributes set, they will simply be set to an empty string, thus leaving the Dialog.containerNode.innerHTML == ""

U hoeft niet afgeleid te worden van _TemplatedMixin omdat het dialoogvenster zelf een sjabloon-widget is. Wijzig dit in plaats daarvan in _WidgetsInTemplateMixin om te compenseren voor de lay-outwidgets van BorderContainer en de inhoud van uw dijit.form. Ook moet uw opmaak binnen de aangepaste sjabloon vooraf worden ingevuld, dus u kunt met zoiets als hier hier naartoe gaan:

Wijzig de sjabloon van oud bijlagepunt voor container naar deze

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

Then add requirements to your markup widgets in the template plus the _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"
}. ... );

Result should ressemble this, keeping your template View.html change in mind:

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
    })
})

You can fiddle here

EDIT:

As there is troubles with dialogs containing borderlayouts (its not unheard of anyways) here's a workaround:

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

    },
    templateString: '....'

Im not certain of the consequences, im thinking the borderlayout of yours might start to misbehave if you try to programmatically change its contents and dimensions.. But it will render - at least it does here: updated fiddle

4
toegevoegd
de bron
ja dat merkte ik eigenlijk .. het is een probleem dat optreedt wanneer een widget binnen de sjabloon moet worden weergegeven. Ik geloof dat het te maken heeft met lay-outcomponenten die een andere lay-outcomponent bevatten - maar ik weet het zeker niet .. Echter, ik ben niet de man met het antwoord hiervoor .. Ding is, zowel dialog als borderlayout racen tegen elkaar om erachter te komen welke maat produceren. Probeer de contentpaneresizemixin voor uw dialoogvenster uit te schakelen en een vaste dimensie in te stellen
toegevoegd de auteur mschr, de bron
zie edit btw, voeg een tijdelijke oplossing toe
toegevoegd de auteur mschr, de bron
Bedankt voor je reactie, het heeft me geholpen het proces opnieuw te bekijken, maar die viool gooit een fout in de console. Het lijkt erop dat het toevoegen van elke soort data-dojo-type dit veroorzaakt. Het containerNode als zichzelf verwijdert de fout. Zie update voor daadwerkelijk geladen sjabloon.
toegevoegd de auteur Phix, de bron
Ik snap het, bedankt voor het duwen in de goede richting mschr! Ik zal doorgaan en mijn resultaten hier publiceren als ik een oplossing vind. Proost!
toegevoegd de auteur Phix, de bron