Extend Dijit.Dialog with template [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

开发者_如何学Go Improve this question

I want to create a Property Sheet like one given below by extending Dijit.Dialog with a template. How can this be achieved?

---

You can extend it using dojo.declare. You can then override the templateString.

dojo.declare('PropertySheetDialog', [dijit.Dialog], {
    //this is the default template for dijit.Dialog
    templateString: dojo.cache("dijit", "templates/Dialog.html"),
});

the default template referenced above is dojo/dijit/templates/Dialog.html you can start with that.

---

Picture in your question is quite funny... I extend Dijit.Dialog like this:

Dialog mixed with TemplatedMixin and WidgetsInTemplateMixin, can insert any declarative widgets.

define([
    "dojo/_base/declare",
    "dijit/Dialog",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/custom.html",
    "dojox/form/CheckedMultiSelect"
], function (declare, Dialog, TemplatedMixin, _WidgetsInTemplateMixin, template) {
    return declare("app.management.panels.customColumn", [Dialog, TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString:template,

        }
    });
});

./templates/custom.html is a copy of the original templates. put your code in containerNode.

<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="header" level="1"></span>
        <span style="display: none;" 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>
    <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">
        <select multiple="true" name="multiselect" data-dojo-type="dojox.form.CheckedMultiSelect">
            <option value="VA" selected="selected">Virginia</option>
            <option value="WA" selected="selected">Washington</option>
            <option value="FL">Florida</option>
            <option value="CA">California</option>
        </select>
    </div>
</div>

Update

Another way to do this, only tested under dojo 1.8. You can use "dijit/ProgressBar" in ./templates/progressInfo.html

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojox/widget/Standby",
    "dijit/TitlePane",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/progressInfo.html",
    "dijit/ProgressBar"
], function (declare, lang, Standby, TitlePane, _WidgetsInTemplateMixin, template) {
    return declare("app.management.panel.cpanel.progressInfo", [TitlePane, _WidgetsInTemplateMixin], {
        'class':'cpanelProgressInfo',
        title:"progressInfo",
        toggleable:false,
        style:"width:450px;",
        mainStore:null,
        content:template,
        postCreate:function () {
            this.inherited(arguments);
            this.Standby = new Standby({target:this.domNode, zIndex:1000, color:"#eeeeee"});
            this.addChild(this.Standby);
            this.Standby.show();
        },
        refresh:function () {
            // my custom dojo store
            var rt = this.mainStore.query()[0];
            this.set('content', lang.replace(template, rt));
        }
    });
});

---

You can create an anonymous widget in the constructor and load a template into that.

However, this can cause problems with layout widgets, and you cannot use data-dojo-attach-event in the template (instead wire up buttons, etc. manually).

    define( [ 'dojo/_base/declare', 
          'dijit/Dialog', 

        // used for anonymous content widget
        'dijit/_WidgetBase', 
        'dijit/_TemplatedMixin', 
        'dijit/_WidgetsInTemplateMixin', 
        'dojo/text!/js/myProject/CustomDialog/templates/CustomDialog.html',

        // for wiring up buttons
        'dojo/_base/lang',
        'dojo/on',

        // used in anonymous widget's template
        'dijit/form/ValidationTextBox', 
        'dijit/form/NumberSpinner', 
        'dijit/form/Textarea',
        'dijit/form/Button' ],
    function( declare, Dialog, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template, lang, on )    
    {
        return declare( [ Dialog ], // inherit from dijit/Dialog
        {
            id: 'my_custom_dialog',
            title: 'I Am Custom!',

            declaredClass: 'myProject.CustomDialog',

            constructor: function( myProjectsettings )
            {
                var contentWidget = new ( declare( [ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], 
                {
                    templateString: template
                } ) );
                contentWidget.startup();
                this.content = contentWidget;
            },

            postCreate: function()
            {
                // run any parent postCreate processes
                this.inherited( arguments );

                // automatically wire up the cancel button
                on.once( this.content.cancelButton, 'click', lang.hitch( this,     
                function()
                {
                    this.onCancel(); // use same method as X button
                } ) );
             }
        } ); // end declare
    }
);

---

se the buildRendering to alter the templateString, thus you get all the _widget goodies from both templates. For more details see the answers in here

---

Using inner class is simple and will be fully supported by dojo.

define("sample/dialog/CreateUserDialog", [
    "dojo/_base/declare",
    "dijit/Dialog",
    "dojo/text!./resources/CreateUserDialog.html",
    "dijit/layout/ContentPane",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin"
], function(declare, Dialog, template, ContentPane, TemplatedMixin, WidgetsInTemplateMixin) {
  declare("sample.layout._CreateUserPane", [ContentPane, TemplatedMixin, WidgetsInTemplateMixin],{
    templateString: template
  });

  return declare("sample.dialog.CreateUserDialog", [Dialog],{
    title: "Create User",
    content: new sample.layout._CreateUserPane()
  });
});

You can touch content object by "(Dialog instance).content".