Search code examples
javascriptdojofloatingdijit.layout

Dojo: Floating Pane throws error on closing and re-opening it

I have an application developed in Dojo framework. And in this application I display a floating Pane.

I configured this floatingPane to closable.

So issue here I am facing is, when I close the floatingPane and try to reopen the same, it does not show up and starts throwing errors in console.

This seems to be issue in Dojo Framework itself cause I can face the same issue in their Documentation.

For sample, you can refer to the page: https://dojotoolkit.org/reference-guide/1.10/dojox/layout/FloatingPane.html

in this sample follow below steps to reproduce the issue:

  1. Click on Run button of Programmatic example
  2. Click on Show me (It will show the floating pane)
  3. On the top right corner, click on close button to close
  4. Click on Show me button again. (This will not work)
Solution

  • This s not a bug , it's already defined as such , if you see the source code of this floating pane , you'll notice the the close button is binded to the close : function this last hide the widget and after call the this.destroyRecursive() so the widget is completely destroyed which throws error when trying to show again .

    SO , you can workaround this by just creating a extending the FloatingPane widget that overrides the close function as below ( hide only the floating pane )

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

    see below working example :

    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/>