Question

我想通过使用模板扩展Dijit.Dialog来创建如下所示的属性表。怎么能实现这一目标？

Property Sheet

Answer 1

您可以使用dojo.declare扩展它。然后，您可以覆盖templateString。

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

上面引用的默认模板是dojo / dijit / templates / Dialog.html 你可以从那开始。

Answer 2

你问题中的图片很有趣...... 我像这样扩展Dijit.Dialog：

与TemplatedMixin和WidgetsInTemplateMixin混合的对话框可以插入任何声明性小部件。

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是原始模板的副本。将您的代码放在 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>

<强>更新

另一种方法，只在dojo 1.8下测试。您可以在./templates/progressInfo.html

中使用“dijit / ProgressBar”

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

Answer 3

您可以在构造函数中创建匿名窗口小部件，并将模板加载到该窗口小部件中。

但是，这可能会导致布局小部件出现问题，并且您无法在模板中使用data-dojo-attach-event（而是手动连接按钮等）。

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

Answer 4

使用buildRendering来改变templateString，从而从两个模板中获取所有_widget好东西。有关详细信息，请参阅here

中的答案

Answer 5

使用内部类很简单，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()
  });
});

您可以通过“（对话框实例）.content”触摸内容对象。

使用模板扩展Dijit.Dialog

5 个答案: