1

在 dojo 中，我打算通过将鼠标拖动到最右边的角边缘来使用可调整大小的对话框。这样的对话框没有调整它的属性。所以我尝试使用浮动窗格，然后将对话框添加为子项。我计划为子对话框使用浮动窗格的可调整大小属性。这种方法是错误的吗？d = new Dialog({ title: "测试对话框", 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();
4

2 回答 2

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>
于 2016-07-27T13:58:02.227 回答
0

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

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

不管怎样，这真的取决于你想用这个新对话框完成什么以及你需要什么功能。扩展任何一个都是我的建议。但是，我不建议通过将 Dialog 放入 Floating Pane 来完成，因为我看不到它会如何完成您想要做的事情。如果你能更多地解释你的用例，那么我可以给你一个更具体的例子。

[编辑]

您可能希望查看以下内容： 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 找到

于 2015-05-29T20:11:50.377 回答