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