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; } } }

amd code for floatingpane and dock...

KenMorefield

Hi,
I'm working on creating a template based on the "new" AMD style of coding. Does anyone have some functioning code for how to create a dojox/layout/FloatingPane that will "dock" to a dojox/layout/Dock? I can't find any functioning examples written in AMD whether it be ESRI samples or dojo ones. I had this functionality working just fine in my older legacy apps...

Thanks,
Ken

Vind meer berichten getagd met

Accepted answers

BenFousek

Check this https://github.com/btfou/simple-measure

All comments

adrian.marsden_DevonCC

ok - old thread and the Git example is long gone, and I've got everything "working" but I do get this error on "closing" the pane (really hiding it)

TypeError<SPAN class="punctuation token">:</SPAN> Cannot read property <SPAN class="string token">'addNode'</SPAN> <SPAN class="keyword token">of</SPAN> undefined
 at Object<SPAN class="punctuation token">.</SPAN>_dock <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>dojox<SPAN class="operator token">/</SPAN>layout<SPAN class="operator token">/</SPAN>FloatingPane<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">10</SPAN><SPAN class="punctuation token">)</SPAN>
 at js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">63</SPAN>
 at Object<SPAN class="punctuation token">.</SPAN><SPAN class="operator token"><</SPAN>anonymous<SPAN class="operator token">></SPAN> <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>dojox<SPAN class="operator token">/</SPAN>layout<SPAN class="operator token">/</SPAN>FloatingPane<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">8</SPAN><SPAN class="punctuation token">)</SPAN>
 at d<SPAN class="punctuation token">.</SPAN>Animation<SPAN class="punctuation token">.</SPAN>onEnd <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">63</SPAN><SPAN class="punctuation token">)</SPAN>
 at d<SPAN class="punctuation token">.</SPAN>Animation<SPAN class="punctuation token">.</SPAN>_fire <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">248</SPAN><SPAN class="punctuation token">)</SPAN>
 at d<SPAN class="punctuation token">.</SPAN>Animation<SPAN class="punctuation token">.</SPAN>_cycle <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">251</SPAN><SPAN class="punctuation token">)</SPAN>
 at Object<SPAN class="punctuation token">.</SPAN><SPAN class="operator token"><</SPAN>anonymous<SPAN class="operator token">></SPAN> <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">63</SPAN><SPAN class="punctuation token">)</SPAN>
 at Object<SPAN class="punctuation token">.</SPAN>c <SPAN class="punctuation token">[</SPAN><SPAN class="keyword token">as</SPAN> run<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">(</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">119</SPAN><SPAN class="punctuation token">)</SPAN>
 at js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN><SPAN class="number token">3.23</SPAN><SPAN class="operator token">/</SPAN>init<SPAN class="punctuation token">.</SPAN>js<SPAN class="punctuation token">:</SPAN><SPAN class="number token">63</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

But many thanks for the earlier post.

KenMorefield

Check this https://github.com/btfou/simple-measure

Thanks Ben - the sample helps an awful lot!

Ken

BenFousek

Check this https://github.com/btfou/simple-measure

KenMorefield

Hi Ben,
Thanks so much for the pointers! Would it be possible for you to post a full sample with the html included... Maybe a simple basemap, with a dockable floating pane?

Thanks a bunch for bearing with my Newbie-ness!

Ken

BenFousek

Here's the basics.

require([
 //layout x
 'dojox/layout/FloatingPane',
 'dojox/layout/Dock',
  //dojo
 'dojo/dom-construct',
 'dojo/_base/window',
], function (
  //layout x
  FloatingPane, Dock,
  //dojo
  domConstruct, win
) {
  var dock = new Dock({
    style: 'position:absolute;bottom:0;right:0;height:0px;width:0px display:none;z-index:0;'
  }, domConstruct.create('div', null, win.body()));

  //measure floating pane
  var measurefp = new FloatingPane({
    id: 'measure-floating-pane',
    title: 'Measure',
    resizable: false,
    resizeAxis: null,
    closable: false,
    dockable: true,
    dockTo: dock,
    style: 'position:absolute;top:80px;left:320px;width:220px;height:200px;visibility:hidden;overflow:hidden;',
    href: 'html/measure.html',
    preventCache: true,
    preload: false
  }, domConstruct.create('div', null, win.body()));
  measurefp.startup();
  measurefp.on('focus', function () {
    measurefp.bringToTop();
  });
  measurefp.on('show', function () {
    measurefp.bringToTop();
  });

});

The difference with AMD is you need to require dojox/layout/Dock to use it in the function as a variable. In legacy and AMD the dock is required by the floating pane class. You can still create a new dock with var dock = new dojox.layout.Dock() in AMD, but that kinda defeats the point.

KenMorefield

Anybody? The part I'm struggling with is how to attach the Floating Pane to the dock in AMD. Can't quite figure out how to call everthing properly...

Ken

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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