nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

DavidChrest

Love this example! Thanks so much Ben!

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

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

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

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

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!

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.

XLS.jpg

Error.jpg

BenFousek

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?

TracySchloss

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.

TracySchloss

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

BenFousek

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.

floating_pane_example_20120630.zip

Legend1.png

gsimpson4

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

BenFousek

@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.

VenkataKondepati_0-1765485458473.png

VenkataKondepati_1-1765485522216.png

color coded tabs.png

TracySchloss

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

BenFousek

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.