// 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();
pFloatingPane.attr("content",downloadString); pFloatingPane.show();
<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; }
Solved! Go to Solution.
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:
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.
Robert,
You may be able to use 'dojo/dom-geometry' to get the size of the content and then size the floating pane accordingly.
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%")') }); });