Question

在dojo中，我打算通过将鼠标拖到最右边的边缘来使用可调整大小的对话框。这样的对话没有调整大小的属性。所以我尝试使用浮动窗格，然后将对话框添加为子对话框。我计划使用浮动窗格的resizable属性为孩子，即对话框。这种方法有误吗？ d =新对话框（{ 标题：“测试对话框”，内容：“嗨” }）;

replicate

Answer 1

这实际上取决于您尝试从FloatingPane复制的Dialog的哪个方面。例如，如果您想要默认操作窗格和/或Dialog覆盖，那么可能只需扩展Dialog并添加一个像浮动窗格一样的调整大小处理程序。

如果您喜欢浮动窗格的更多方面（例如，可移动，可调整大小，锁定到父窗口），那么您可能应该扩展FloatingPane并添加您喜欢的对话框的属性。

无论哪种方式，它实际上取决于您使用这个新的Dialog尝试完成的内容以及您需要的功能。扩展任何一个都是我的建议。但是，我建议不要将Dialog放入浮动窗格，因为我无法看到它将如何完成您尝试做的事情。如果你能更多地解释你的用例，那么我可以给你一个更具体的例子。

[编辑]

您可能希望查看此内容：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

找到

Answer 2

感谢Richard提出的问题和建议。这对我有用，我在这里添加它，如果其他人需要类似的东西：

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>

如何获得可调整大小的dijit对话框

2 个答案: