how to obtain a resizable dijit dialog

Question

In dojo I intend to use my dialog box resizable by dragging the mouse over the rightmost corner edge. Dialog as such has no property to resize it. So I try to use Floating pane and then add the dialog as child. I plan to use the resizable property of Floating Pane for the child i.e dialog. Is this approach wrong ? d = new Dialog({ title: "Testing Dialog", content: "hi" });

  fp = new FloatingPane({
        title: "Test",
        resizable: true,         
        dockable: false,
        style: "position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
        id: "fp"
    }, dojo.byId("fp"));
    fp.addChild(d);
    fp.startup();

Answer 1

It really depends on what aspect of the Dialog you're trying to replicate from the FloatingPane. If, for instance you want the default action pane and/or the Dialog overlay, then perhaps it's a better idea to just extend the Dialog and add a resize handler like the Floating Pane has.

If there are more aspects of a Floating Pane you like (e.g., moveable, resizeable, locked into a parent window), then perhaps you should extend the FloatingPane and add the properties of a Dialog that you like.

Either way though, it really depends on what you're trying to accomplish with this new Dialog and what features you need. Extending either would be my suggestion. I would not, however recommend accomplishing either by placing a Dialog into a Floating Pane because I can't see how it would accomplishes what you're trying to do. If you could explain your use case more, then I can give you a more concrete example.

[Edit]

You'll probably want to look at this: http://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html to learn more about how to extend widgets.

Looking at the Floating Pane code, what you'll need to do is to add a resizeHandle to your extended Dialog that looks like this:

<span dojoAttachPoint="resizeHandle" class="dojoxFloatingResizeHandle"></span>

You'll then need to initialize it by doing something like this:

this._resizeHandle = new ResizeHandle({
    targetId: this.id,
    resizeAxis: this.resizeAxis
},this.resizeHandle);

Resize handle can be found at dojox/layout/ResizeHandle

Answer 2

Thanks for the question and the advice Richard. This worked for me, I add it it here if someone else need something similar:

define([
  'dojo/_base/declare',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  'dojo/text!./DialogResize.html',
  'dojox/layout/ResizeHandle',
  'dijit/Dialog'], function (
    declare,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    template,
    ResizeHandle,
    Dialog
    ) {

    return declare('app.Dialog.Resize', [Dialog, _TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString: template,

        // resizeAxis: String 
        //      One of: x | xy | y to limit pane's sizing direction 
        resizeAxis: "xy", 

        postMixInProperties: function() {
          this.inherited(arguments);
          //console.log('DialogResize');
        },

        startup: function() {
            //console.log('DialogResize startup');
            // The orginal template was modifed by adding a resizeHandle handle, which is then initialised here
            this._resizeHandle = new ResizeHandle({
              targetId: this.id,
              resizeAxis: this.resizeAxis
          }, this.resizeHandle);            
        }

  });
});

Then DialogResize.html:

<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="heading" level="1"></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>
    <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent"></div>
    ${!actionBarTemplate}
    <span dojoAttachPoint="resizeHandle" class="dojoxFloatingResizeHandle"></span>
</div>