Как получить изменяемый размер диалогового окна

Question

В додзё я собираюсь использовать диалоговое окно с изменяемыми размерами, перетаскивая мышь через крайний правый угол. Диалог как таковой не имеет свойства, чтобы изменить его размер. Поэтому я пытаюсь использовать плавающую панель, а затем добавить диалог как дочерний. Я планирую использовать свойство изменяемого размера Floating Pane для дочернего элемента, т.е. Это неправильный подход? d = новый диалог ({ title: "Testing Dialog", содержимое: "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

Спасибо за вопрос и советы Ричарда. Это работает для меня, я добавляю это здесь, если кому-то еще нужно что-то подобное:

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

  });
});

Тогда 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>

Answer 2

Это действительно зависит от того, какой аспект диалога вы пытаетесь воспроизвести из FloatingPane. Если, например, вы хотите панель действий по умолчанию и / или наложение Dialog, то, возможно, лучше просто расширить диалоговое окно и добавить обработчик изменения размера, как в плавающей панели.

Если вам нравится больше аспектов плавающей панели (например, перемещаемые, изменяемые размеры, заблокированные в родительском окне), то, возможно, вам следует расширить FloatingPane и добавить свойства диалогового окна, которые вам нравятся.

В любом случае, это действительно зависит от того, чего вы пытаетесь достичь с помощью этого нового диалога и какие функции вам нужны. Расширение любого было бы моим предложением. Однако я бы не советовал делать это, помещая диалог в плавающую панель, потому что я не вижу, как это могло бы выполнить то, что вы пытаетесь сделать. Если бы вы могли объяснить ваш вариант использования более подробно, то я могу привести вам более конкретный пример.

[Редактировать]

Возможно, вы захотите взглянуть на это: http://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html чтобы узнать больше о том, как расширять виджеты.

Глядя на код плавающей панели, вам нужно добавить resizeHandle в расширенный диалог, который выглядит следующим образом:

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

Затем вам нужно будет инициализировать его, выполнив что-то вроде этого:

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

Дескриптор изменения размера можно найти в dojox/layout/ResizeHandle