I have a declarative floatingPane that opens on a button click. but once closed, it won't open again. Apparently, the floating pane get destroyed after closing. how do I overwrite that behavior? function showDialogMeasure() { if (dijit.byId("dFloatingPane").style.visibility === "hidden") { dijit.byId("dFloatingPane").show(); } dijit.byId("dFloatingPane").show(); }

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

floatingPane

RichardMoussopo

I have a declarative floatingPane that opens on a button click. but once closed, it won't open again. Apparently, the floating pane get destroyed after closing. how do I overwrite that behavior?

<div data-dojo-type="dijit/form/Button" id="measure" data-dojo-props="iconClass:'measureIcon'" title="Measure"

onclick="showDialogMeasure()">

</div>

<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"

data-dojo-props="resizable:true, dockable:false, title:'Measurement'"

style="position: absolute; top: 30%; left: 25%; width: 280px; height: 180px; visibility: hidden; padding: 0; margin: 0;">

</div>

function showDialogMeasure() {
    if (dijit.byId("dFloatingPane").style.visibility === "hidden") {
        dijit.byId("dFloatingPane").show();
    }
    dijit.byId("dFloatingPane").show();
  
}

Encontre mais publicações marcadas com

Accepted answers

kenbuja

Take a look at this JSBin code that seems to work properly.

All comments

DavidStajan1

I've used this implementation of a floating widget in my app and it worked great. There might be some useful code in there for others so I'm sharing the link

Spatial Agent GIS

TedChapin

The FloatingPane documentation mentions a way to overwrite the close behavior using a subclass.

http://dojotoolkit.org/reference-guide/1.10/dojox/layout/FloatingPane.html#dojox-layout-floatingpane

When the widget is closed via the close button, it can no longer be shown: FloatingPane destroys itself when the close button is pressed. You must create a subclass of FloatingPane to override this behavior.

It would be good to hammer out these details so you can have a closable and reopenable floating pane that remembers the state of its contents.

RichardMoussopo

Thank you Steven,

I could just use a simple div, but I do like the idea of the floating pane for my other tools and being able the move the panel around the page...

I wish the floating panel could be that simple, now it's almost 8 hours that I am trying to figure this thing out!

StevenGraf1

You shouldn't have to do anything special with the measurement widget. All you need to do is load in the correct modules and take the code from ESRI and put it in your application. I'm sure you're already using this sample.

Here is my HTML.

<div style="position:absolute; right:10px; bottom:40px; z-Index:999;-webkit-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49); -moz-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49); box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49);">
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
            <div id="measurementDiv"></div>          
          </div>
        </div>

RichardMoussopo

Thank you Ken,

but my floatingPane does not seem to have that down arrow. how do you get the narrow down to show up like yours?

as you can see bellow, my floatingPanel after setting to false the closable option and still no down narrow

kenbuja

Richard, this is what my floating pane looks like

The down arrow in the upper right corner is what hides the pane. If you want access to the hide event, this is the code that fires it

aspect.after(fpVideo, 'hide', function () { console.log("aspect hide"); });

RichardMoussopo

Re: floatingPane

riyasdeen_b proposition to rewrite the entire code for just closing and reopening the floating pane, I think is too much. kenbuja‌'s short-cut looks interesting, but still trying to figure out how to may be add a close link in the title bar to hide the panel on click event....

kenbuja

What I've done with the FloatingPane in my application is to create it with the closable property set to false to prevent it from being closed. The downarrow control still lets the user "close" it by hiding it.

<div id="divFloatingPane"
    data-dojo-type="dojox/layout/FloatingPane"
    data-dojo-props="resizable:false, dockable:true, closable:false, title:'test'"
    style="position:absolute;top:50px;left:50px;width:300px;height:220px;visibility:hidden;">
</div>

In my script, I use this to get a reference to the FloatingPane

fpVideo = registry.byId("divFloatingPane");

and I can then use

fpVideo.show();

when I want to open it programmatically.

StevenGraf1

Here's how I achieve this affect. Set the class to display none in your css.

<img id="layerID" alt="" src="images\layers.png" Title="Layers" onclick="toggle('layerList')" />
<div id="layerList" class="floating-layerMenuWhite2" style="width:250px; height:400px;">
</div>

RiyasDeen

Hi Richard,

I had one hell of a time trying to manipulate the default floatingpane close behaviour. Then finally ended up recreating the floating pane every time i required it. Here's an extract if it helps.

createMeasurement: function () {
  console.log("Entered Method: " + arguments.callee.nom);
  // On show move the top position by height of toolbar. This needs to be done if using API version 3.0 or above. and not needed for API 2.8 or below.
  // Same has to be done for left position using contents pane width, if contents panel is left oriented.

  this.deleteWidgetsRecursive("measurementPanel");
  var holder = new dojo.create('div', { 
  id: 'measurementPanelHolder'
  });
  this._floatingContainer.containerNode.appendChild(holder);
  this._measurementPanel = new dojox.layout.FloatingPane({
  id: "measurementPanel",
  title: "Measurement",
  closable: true,
  resizable: false, 
  dockable: false,
  isLayoutContainer: true,
  doLayout: true,
  dockTo: this._dock,
  style: 'top:25px;left:0px;width:210px;height:120px;z-index:101;'
  }, dojo.byId('measurementPanelHolder')).placeAt(this._floatingContainer.containerNode, "last");
  this._measurementPanel.containerNode.appendChild(new dojo.create('div', { 
  id: 'measurementDiv',
  style: 'font-family: tahoma; font-size: medium;'
  }
  )
  );
  //dojo.connect(this._measurementPanel, "onShow", dojo.hitch(this, function () { this._measurementPanel.isVisible = true; }));
  this._measurementWidget = new esri.dijit.Measurement({
  map: this._map,
  defaultAreaUnit: esri.Units.SQUARE_KILOMETERS,
  defaultLengthUnit: esri.Units.KILOMETERS
  }, dojo.byId("measurementDiv")).placeAt(this._measurementPanel.containerNode);

  dojo.connect(this._measurementWidget.area, "onClick", dojo.hitch(this, function () {
  this._map.setMapCursor('url(cursors/Measure_Area.cur), auto');
  }));

  dojo.connect(this._measurementWidget.distance, "onClick", dojo.hitch(this, function () {
  this._map.setMapCursor('url(cursors/Measure_Distance.cur), auto');
  }));

  dojo.connect(this._measurementWidget.location, "onClick", dojo.hitch(this, function () {
  this._map.setMapCursor('url(cursors/Measure_Point.cur), auto');
  }));

  dojo.connect(this._measurementWidget, "onMeasureEnd", dojo.hitch(this, function(activeTool,geometry){
  if (activeTool === "location") {
  this.setCursorToActiveTool();
  }
  }));

  dojo.connect(this._measurementPanel.closeNode, "onclick", dojo.hitch(this, function(){
  this.setCursorToActiveTool();
  }));

  this._measurementPanel.startup();
  this._measurementWidget.startup();
  },

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.