topic Re: Unable to close and reopen Floating Panel using Dojox in ArcGIS JavaScript Maps SDK Questions

Unable to close and reopen Floating Panel using Dojox

SmaranHarihar — Sat, 11 Dec 2021 09:23:08 GMT

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

Re: Unable to close and reopen Floating Panel using Dojox

BenFousek — Sun, 23 Sep 2012 15:33:22 GMT

Here's an example I posted to the code gallery. It takes a little finesse to get floating panes looking and functioning properly.

http://www.arcgis.com/home/item.html?id=cf41ba2f1798462f9386efdd674f36ba

When you click the (X) on a floating pane dojo destroys the floating pane; hence the error because the floating pane no long exists. The example shows how to change that. You'll need to create a dock and make the floating pane dockable to said dock. My example hides the dock with css. You can have a visible dock, but there's more dojo and css required to make it look and function right. My experience is users don't like the dock.

Re: Unable to close and reopen Floating Panel using Dojox

TracySchloss — Wed, 05 Dec 2012 13:20:44 GMT

I'm interested in seeing this example, but when I clicked on the link, it said it wasn't found in the Gallery.

Re: Unable to close and reopen Floating Panel using Dojox

BenFousek — Wed, 05 Dec 2012 13:33:28 GMT

@Tracy - It looks like I accidentally deleted it last time I cleaned up my content on arcgis. I'm away from home base this morning. I'll hunt down the zip and attach here this evening at the latest.

Re: Unable to close and reopen Floating Panel using Dojox

GeorgeSimpson — Sat, 11 Dec 2021 09:23:11 GMT

You have to override the close function of the FloatingPane. Here's a snippet from my application that does just that, but for a different component. This constructor creates a floating pane that will stay inside its parent element. In postCreate, I override "this.close"


var ConstrainedFloatingPane = declare(FloatingPane, {
                postCreate: function () {
                    this.inherited(arguments);
                    this.moveable = new Move.parentConstrainedMoveable(
                    this.domNode, {
                        handle: this.focusNode,
                        area: "content",
                        within: true
                    });
                    this.close = function () {
                        this.domNode.style.display = "none";
                        this.domNode.style.visibility = "hidden";
                    };
                }
            });

var layercontainerbase = domconstruct.create("div");

layercontainerbase.appendChild(<some content>);

var layercontainer = new ConstrainedFloatingPane({
                title: "Layers/Legend",
                resizable: true,
                dockable: false,
                //constrainToContainer: true,
                style: "position:absolute;top:10px;right:40px;width:260px;height:400px;z-index:99;"
            }, layercontainerbase);

Re: Unable to close and reopen Floating Panel using Dojox

BenFousek — Wed, 05 Dec 2012 16:55:45 GMT

Attached is the example in a zip. It's api v2.8. Looking at it again, it's a bit antiquated, however the principles are there. Two major differences: 1) I only load templated widgets in floating panes now, even if it's just html; 2) I use a different method to add mouse events that change the (X) button on the floating pane, because often times there is a need to connect to the closing of the pane, e.g. clear measure graphics when the pane with a measure widget closes.

Re: Unable to close and reopen Floating Panel using Dojox

TracySchloss — Mon, 10 Dec 2012 19:04:05 GMT

Thanks for the example. Since I haven't been doing Javascript very long, I prefer antiquated. It's about my speed!

Re: Unable to close and reopen Floating Panel using Dojox

TracySchloss — Mon, 10 Dec 2012 19:41:48 GMT

Now that I have unzipped and loaded this example, it isn't doing anything except load the main page. The tools do nothing. I'm not getting any errors.

Re: Unable to close and reopen Floating Panel using Dojox

BenFousek — Tue, 11 Dec 2012 02:47:08 GMT

Now that I have unzipped and loaded this example, it isn't doing anything except load the main page. The tools do nothing. I'm not getting any errors.

Clicking on bookmarks or map options under the tools drop down doesn't show the floating pane?

Re: Unable to close and reopen Floating Panel using Dojox

TracySchloss — Tue, 11 Dec 2012 14:02:32 GMT

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.

Re: Unable to close and reopen Floating Panel using Dojox

PaulBushore — Tue, 11 Dec 2012 14:39:26 GMT

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!

Re: Unable to close and reopen Floating Panel using Dojox

AdrianMarsden — Sat, 04 May 2013 11:56:38 GMT

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

Re: Unable to close and reopen Floating Panel using Dojox

AdrianMarsden — Sat, 11 Dec 2021 09:23:13 GMT

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")' )
    });

Re: Unable to close and reopen Floating Panel using Dojox

BenFousek — Sat, 11 Dec 2021 09:23:16 GMT

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();
});

Re: Unable to close and reopen Floating Panel using Dojox

DianaBenedict — Sat, 11 Dec 2021 09:23:19 GMT

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

Re: Unable to close and reopen Floating Panel using Dojox

DavidChrest — Mon, 09 May 2016 18:10:21 GMT

Love this example! Thanks so much Ben!