Help with dojo floating pane

10878
14
Jump to solution
08-29-2013 07:31 AM
BetsySchenck-Gardner
Occasional Contributor
I'm having an issue using dojox.layout.FloatingPane. I create the floating pane using the following code:
        // add popup floating pane          var dock = new dojox.layout.Dock({           id: 'dock', style: 'position:absolute; bottom:0; right:0; height:500px; width:0px; display:none; z-index:0;'         }, dojo.create('div', null, dojo.body()));         //find size of the map so to get the best possible initial size for the user         var popX = map.width;         var popY = map.height - 30;         pFloatingPane = new dojox.layout.FloatingPane({           title: "Download Menu",           resizable: true, //allow resizing           closable: false, //we never want to close a floating pane - this method destroys the dijit           dockable: true, // yes we want to dock it           dockTo: dock,           style: 'position:absolute;top:100px;right:10px;width:275px;height:375px;visibility:hidden;z-index:999 !important',           id: "pFloatingPane"         }, dojo.create('div', null, dojo.body()));         dojo.connect(pFloatingPane, 'onFocus', function () {           dijit.byId('pFloatingPane').bringToTop()         });         //do the same for onShow         dojo.connect(pFloatingPane, 'onShow', function () {           dijit.byId('pFloatingPane').bringToTop()         });         pFloatingPane.startup();

When you click on a button, the floating pane is made visible on the map.
       pFloatingPane.attr("content",downloadString);        pFloatingPane.show();

Everything works fine. The floating pane displays all the content it is suppose to. The problem I have is after I close the pane and then click on the button to open it again, its height increases. In fact it keeps increasing every single time you reopen the floating pane. Am I missing something that controls the size of the pane? I'm using the following stylesheets:
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/FloatingPane.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/ResizeHandle.css"/>        .dojoxFloatingPane {          padding: 0 0 20px 0 !important;          border: solid 1px #769DC0 !important;          font-family: Arial, "Kimberley", sans-serif;          font-size: 14px;       }        .dojoxFloatingPaneTitle {          border: none;          padding: 5px 0 10px 8px;          height: 16px;          background: #ABD6FF url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/images/titlebar.png') repeat-x;       }        .dojoxFloatingPaneContent {          border-top: solid 1px #769DC0;          font-family: Arial, "Kimberley", sans-serif;          font-size: 12px;       }        .dojoxFloatingMinimizeIcon {          width: 15px;          height: 15px;          margin-right: 6px;          padding-right: 6px;          background: url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/images/dialogCloseIcon.png') no-repeat 0 0;       }

Thanks for any assistance.
0 Kudos
14 Replies
RobertKirkwood
Occasional Contributor III

Ben,

Is there any way to making the floating pane behave like a dialog box as far as it resizing on the fly? 

there is an example of my dialog box here:

WyoBio :: Map

When you click on a point on the map it populates the dialog box. if you click on other features with more data the box resizes automatically. I have  went to a floating pane because the dialog is modal and disables some of the maps functionality. I have tried to get the floating pane to behave in a similar fashion but its not working.

0 Kudos
BenFousek
Occasional Contributor III

Robert,

You may be able to use 'dojo/dom-geometry' to get the size of the content and then size the floating pane accordingly.

AdrianMarsden
Occasional Contributor III
Hi - anyone else having issues with floating panes/non-AMD and 3.7

I've added

dojo.require("dojox.layout.Dock");

As it seems to be required now, but still get "Uncaught TypeError: Cannot call method 'attr' of undefined " when it is called.
0 Kudos
KenMorefield
Occasional Contributor
Hi Adrian,
Did you ever figure out how to use the floating panes with non-AMD code and version 3.7?  I'm having no luck.  I even notice that ESRI's own sample doesn't work - https://developers.arcgis.com/en/javascript/jssamples/gp_clipasync.html

There is no visible floating pane on the sample.  Anyone have any ideas, or better yet a functioning, non-AMD sample?

Thanks,
Ken
0 Kudos
AdrianMarsden
Occasional Contributor III
Yes - I had to move various bits to my init function.  As I use the constrained floating pane, I don't know which bits are relevant, so here is all the bits I had to move into my init function

  var ParentConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {


        postCreate: function ()
        {
            this.inherited(arguments);
            this.moveable = new dojo.dnd.move.parentConstrainedMoveable(
                this.domNode, {
                    handle: this.focusNode,
                    area: "content",
                    within: true
                }
            );
        }


    });
    var BoxConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {


        postCreate: function ()
        {
            this.inherited(arguments);
            this.moveable = new dojo.dnd.move.boxConstrainedMoveable(
                this.domNode, {
                    handle: this.focusNode,
                    box: { l: 10, t: 10, w: 400, h: 400 },
                    within: true
                }
            );
        }


    });


    var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {


        postCreate: function ()
        {


            this.inherited(arguments);
            this.moveable = new dojo.dnd.move.constrainedMoveable(
                this.domNode, {
                    handle: this.focusNode,
                    constraints: function ()
                    {
                        var coordsBody = dojo.coords(dojo.body());
                        // or
                        var coordsWindow = {
                            l: 0,
                            t: 0,
                            w: window.innerWidth,
                            h: window.innerHeight
                        };


                        return coordsWindow;
                    },
                    within: true
                }
            );
        }


    });
    var pFloatingPane;


    dojo.ready(function ()
    {








        //add popup floating pane for in
        var dock = new dojox.layout.Dock({
            id: 'dock',
            style: 'position:absolute; bottom:0; right:0; height:500px; width:0px; display:none; z-index:0;'
            //tuck the dock into the the bottom-right corner of the app
        }, dojo.create('div', null, dojo.body()));
        //find size of the map so to get the best possible initial size for the user
        popX = map.width * 0.66;
        popY = map.height * 0.66;


        pFloatingPane = new ConstrainedFloatingPane({


            title: "Layer Info",
            resizable: true, //allow resizing
            closable: false, //we never want to close a floating pane - this method destroys the dijit
            dockable: true, // yes we want to dock it
            dockTo: dock,
            style: 'position:absolute;top:90px;left:340px;width:' + popX + 'px;height:' + popY + 'px;visibility:hidden;overflow:hidden;',


            id: "pFloatingPane"
        }, dojo.create('div', null, dojo.body()));


        dojo.connect(pFloatingPane, 'onFocus', function ()
        {
            dijit.byId('pFloatingPane').bringToTop();
           // alert(1)
        });
        //do the same for onShow
        dojo.connect(pFloatingPane, 'onShow', function ()
        {
            dijit.byId('pFloatingPane').bringToTop();
        });




        dojo.connect(pFloatingPane, "onDock", function ()
        {
          //  alert(1)
        });






        //add popup for draw tools
        var drawtools = new ConstrainedFloatingPane({
            id: 'drawtools',
            title: 'Drawing Tools',
            href: 'common/draw.html',
            resizable: false,
            closable: false,
            dockable: true,
            dockTo: dock,
            style: 'position:absolute;top:100px;left:50px;width:450px;height:480px;visibility:hidden;overflow:hidden;'
        },
            dojo.create('div', null, dojo.body()));


        dojo.connect(drawtools, 'onFocus', function ()
        {
            dijit.byId('drawtools').bringToTop()
        });
        dojo.connect(drawtools, 'onShow', function ()
        {
            dijit.byId('drawtools').bringToTop()
            r1 = dijit.byId('radio2')
            //it's late, I want to go home, so classic bodge here
            if (r1) {
                dijit.byId('radio1').set('checked', false);
                dijit.byId('radio2').set('checked', false);
                dijit.byId('radio3').set('checked', false);
                dijit.byId('radio4').set('checked', false);
                dijit.byId('radio5').set('checked', false);


            }


        });


        dojo.connect(drawtools.dockNode, 'click', function ()
        {
            drawToolbar.deactivate(); enableID();
        });




        pFloatingPane.startup();
        
        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%")')


        });


    });


Hope that helps.
0 Kudos