Unable to close and reopen Floating Panel using Dojox

[SmaranHarihar]

I am trying to open a floating panel, using onClick event, it opens fine but shows this error in the console, `this.onClick is not a function`.

If I close the floating panel and then try to a reopen, it won't open again and I keep receiving the same error in the console.

This is my application. You can see a floating panel emerge when you click on the `Layers` button in the toolbar.

This is the main function that is opening the FLoating Panel,

    function addFloatingPanel() {
        var fp = new dojox.layout.FloatingPane({
            title: "Layers",
            resizeable: true,
            dockable: false,
            closable: true,
            style: "position:absolute; top:0; left:50px; width:245px; height: 175px; z-index: 100; visibility: hidden;",
            id: 'floater'
        }, dojo.byId('floater'));
        fp.startup();
        if (dojo.byId('floater').style.visibility === 'hidden') {
            dijit.byId('floater').show();
        } else {
            dojo.byId('floater').style.visibility = 'hidden'
            dijit.byId('floater').show();
        }
    }

Where am I going wrong? Also, the floating panel is visible in firefox but not in chrome!!

[TracySchloss]

Not in either IE or Firefox, no.  The page loadsfine, it just doesn't do anything for me.  I found a more simplistic example from the 'clip and ship' sample, so I was able to accomplish what I wanted.  For future reference it would be good to have a working copy of something with more tools and panes to it.

[PaulBushore]

Hello,

FYI, I was able to download and loaded the app in Visual Web Developer Express 2010 and it came up in Firefox 17.0.1.  I was able to use the drop-down to fire the floating panels and I was then able to resize the bookmark panel.  I was also able to use the Map Options floating panel as well and interact with the panes within that one.

When I opened up the instance of the page in IE 8.  I could bring up both of the floating panes again, but when I moved them then tried to resize, they reverted back to their original size and location...go go IE.

Just thought I would give this feedback.    Only wish IE was better with dealing with it 🙂

Thanks for providing your information Ben!

[AdrianMarsden]

Ben - many thanks for your floating pane style and code.  I have used to to demonstrate on another forum my "all results, all fields from ID in one pane" thingy.  SO much better than a dialog.

Cheers

ACM

[AdrianMarsden]

Hi

Whilst I've got this working, I can't seem to hook anything up to the "close" button - which is really a dock button.  Which event works?  I'm using a floating pane for my draw tools, so want it to deactivate the draw tools totally when "closed"

Cheers

ACM

Doh! it was there all the time, needed adding some code

 dojo.forEach(dojo.query('.dojoxFloatingMinimizeIcon'), function (i) {        dojo.attr(i, 'onmouseover', 'dojo.style(this, "backgroundPosition", "-21px 50%")');
        dojo.attr(i, 'onmouseout', 'dojo.style(this, "backgroundPosition", "0 0")');
        dojo.attr(i, 'onmousedown', 'dojo.style(this, "backgroundPosition", "-42px 50%")')
        dojo.attr(i, 'onClick','alert("This floating pane has been docked")' )
    });

[BenFousek]

You can also connect to the dockNode to have different click events for each dockNode.

var measurefp = new dojox.layout.FloatingPane({
  id: 'measure-floating-pane',
  title: 'Measure',
  resizable: false,
  resizeAxis: null,
  closable: false,
  dockable: true,
  dockTo: app.layout.dock,
  style: 'position:absolute;top:100px;left:350px;width:160px;height:180px;visibility:hidden;overflow:hidden;',
  href: 'html/measure.html',
  preload: false
}, dojo.create('div', null, dojo.body()));

measurefp.startup();

measurefp.on('focus', function () {
  measurefp.bringToTop();
});

measurefp.on('show', function () {
  measurefp.bringToTop();
});

dojo.connect(measurefp.dockNode, 'click', function () {
  app.tools.measure.clear();
});

[DianaBenedict]

I have been able to get a floating pane to successfully open and close. Not sure if this is your issue but here is the code that I use to create the floating pane and connect the events.  I am sure that I could do this a better way by creating a baseWidget but I was in a crunch.

  createFloatingPane: function (floatingPaneId, paneTitle, tabContainerID) {
    //destroy the dijits before you create them!
    var floatingPaneAttributes = dijit.byId(floatingPaneId);
    if (floatingPaneAttributes) { //&& treeContainer instanceof dijitTree
      //Destroy this widget and it's descendants from the manager object
      floatingPaneAttributes.destroyRecursive(false);
    }
    dojo.destroy(floatingPaneId);

    var dock = dijit.byId("dock")
    if (dock) {
      dock.destroyRecursive(false);
      dojo.destroy(dock.id);
    }
    if (dijit.byId(tabContainerID)) {
      dijit.byId(tabContainerID).destroyRecursive(false);
      dojo.destroy(tabContainerID);
    }

    //NOTE: only  need one dock created for the entire app
    //TODO: fix this code to make sure it accounts for this
    dock = new dojox.layout.Dock({
      id: "dock",
      style: 'position:absolute; bottom:0; right:0; height:0px; width:0px; display:none; z-index:0;'
      //class: "dockClass"
    }, dojo.create('div', null, dojo.body()));

    //add a floating pane
    floatingPaneAttributes = new dojox.layout.FloatingPane({
      id: floatingPaneId,
      title: paneTitle,
      resizable: true, //allow resizing
      closable: true, //we never want to close a floating pane - this method destroys the dijit ..otherwise, override the on close event
      dockable: true, // yes we want to dock it
      dockTo: dock, //if you create the floating pane outside of the same function as the dock, you'll need to set as dijit.byId('dock')
      style: 'position:absolute;top:100px;left:50px;width:400;height:400px;visibility:hidden;z-index:999 !important'
    }, dojo.create('div', null, dojo.body()));

    floatingPaneAttributes.resize({ w: 410, h: 410 });

    //add the TabContainer to the Floating Pane
    var tc = new dijit.layout.TabContainer({
      id: tabContainerID,
      tabPosition: 'bottom',
      style: "height: 100%; width: 100%;",
      class: "claro" //"soria"
    });

    // place the tabcontainer into content pane.
    // IMPORTANT: SINCE FLOATING PANE IS NOT A "Container", WE MUST ATTACH THE TABCONTAINER TO ITS DOM NODE.
    tc.placeAt(floatingPaneAttributes.containerNode);
    // call startup to layout everyone.
    floatingPaneAttributes.startup();
    return floatingPaneAttributes;
  }

//code that calls the create floating pane and sets up the events
var floatingPaneAttributes = helperOperations.createFloatingPane(_floatingPaneId, "Attribute Editor", tabContainerId);

    if (floatingPaneAttributes) {
      //insert code here to add the tab pages of inerest

      //Override the close function so the control does not get destroyed
      floatingPaneAttributes.close = function () {
        floatingPaneAttributes.minimize();
        _isFloatingPaneVisible = false;
        clearSelectedFeatureLayers();
      };

      //connect the events
      dojo.connect(floatingPaneAttributes, 'onFocus', function () {
        floatingPaneAttributes.bringToTop()
      });

      dojo.connect(floatingPaneAttributes, 'onShow', function () {
        floatingPaneAttributes.bringToTop();
        _isFloatingPaneVisible = true;
      });

    }

Hope this helps