Select to view content in your preferred language

Unable to close and reopen Floating Panel using Dojox

7382
15
09-22-2012 11:29 PM
SmaranHarihar
Deactivated User
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!!
0 Kudos
15 Replies
BenFousek
Deactivated User
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.
0 Kudos
TracySchloss
Honored Contributor
I'm interested in seeing this example, but when I clicked on the link, it said it wasn't found in the Gallery.
0 Kudos
BenFousek
Deactivated User
@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.
0 Kudos
GeorgeSimpson
Regular Contributor
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);
0 Kudos
BenFousek
Deactivated User
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.
0 Kudos
DavidChrest
Deactivated User

Love this example! Thanks so much Ben!

0 Kudos
TracySchloss
Honored Contributor
Thanks for the example.  Since I haven't been doing Javascript very long, I prefer antiquated.  It's about my speed!
0 Kudos
TracySchloss
Honored Contributor
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.
0 Kudos
BenFousek
Deactivated User
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?
0 Kudos