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

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

[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]

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

[GeorgeSimpson]

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]

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.

[DavidChrest]

Love this example! Thanks so much Ben!

[TracySchloss]

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

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

[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?