Dojo：浮动窗格在关闭和重新打开时抛出错误答案

【问题标题】：Dojo: Floating Pane throws error on closing and re-opening itDojo：浮动窗格在关闭和重新打开时抛出错误
【发布时间】：2019-08-27 04:54:17
【问题描述】：

我有一个在 Dojo 框架中开发的应用程序。在这个应用程序中，我显示了一个浮动窗格。

我将此floatingPane 配置为closable。

所以我面临的问题是，当我关闭 floatingPane 并尝试重新打开它时，它不会出现并开始在控制台中抛出错误。

这似乎是Dojo Framework 本身的问题，因为我可以在他们的文档中遇到同样的问题。

示例可参考页面：https://dojotoolkit.org/reference-guide/1.10/dojox/layout/FloatingPane.html

在此示例中，请按照以下步骤重现问题：

点击程序示例的运行按钮
单击“显示”（它将显示浮动窗格）
点击右上角关闭按钮关闭
再次单击“显示”按钮。（这不起作用）

【问题讨论】：

标签： javascript dojo floating dijit.layout

【解决方案1】：

这不是错误，它已经被定义为这样，如果您看到此浮动窗格的源代码，您会注意到关闭按钮绑定到 close ：函数最后隐藏小部件并在调用 this.destroyRecursive() 之后，小部件被完全破坏，当尝试再次显示。

所以，您可以通过创建扩展 FloatingPane 小部件来解决此问题覆盖关闭功能如下（仅隐藏浮动窗格）

var CustomFloatingPane = declare(FloatingPane, {
  close: function(e) {
    // overinding close function
    this.hide();
  }
});

请参阅下面的工作示例：

require(["dojo/_base/declare","dojox/layout/FloatingPane", "dojo/dom", "dojo/ready", "dijit/form/Button"], function(declare, FloatingPane, dom, ready, Button) {
  ready(function() {
  
    var CustomFloatingPane = declare(FloatingPane, {
      close: function(e) {
        this.hide();
      }
    });
    
  
    myCustomloatingPane = new CustomFloatingPane({
      title: "A floating pane",
      resizable: true,
      dockable: true,
      style: "position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
      id: "myCustomloatingPane"
    }, dom.byId("customFloatingPane"));

    myCustomloatingPane.startup();
  });
});

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/ResizeHandle.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/FloatingPane.css" rel="stylesheet" />


<body class="claro">
<div id="customFloatingPane">Hi I'm custom floating pane , extended to hide istead of destroy and close :) </div>
</body>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){myCustomloatingPane.show();}"></div>
<br/><br/><br/><br/>

【讨论】：

感谢您的解决方案。不过我猜，应该是框架自己来处理的。
@confusedDeveloper ，所有的 dojox 都意味着实验性的小部件，所以过了一段时间，如果它被验证了就可以进入 dijit ，现在 1.x 版本已经过时了，所以我认为停止它的开发.. .
哦，这就是它的工作原理。我是 Dojo 的新手。仅从昨天开始使用。