Question

我声明了一个FloatingPane“testFloatingPane”，但当我点击地图时，使用
pFP = registry.byId("testFloatingPane");要检索它，pFP仍未定义。（请参阅此操作here）我在使用此代码时遇到了什么问题？

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/skins/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.8/js/dojo/dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.8/js/dojo/dojox/layout/resources/ResizeHandle.css">
    <style>
    html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
    }

    #testFLoatingPane {
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        position: absolute;
        top: 35px;
        left: 60px;
        width: 500px;
        height: 300px;
        z-index: 90;
    }

    .dojoxFloatingPaneContent {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 8pt;
        font-weight: bold;
        overflow: auto;
    }

    .dojoxFloatingPaneTitle, .reportTitlePane {
        color: white;
        background-color: #76a2c5;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
        font-weight: bold;
        overflow: auto;
    }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
    var map;
    var pFP;

    require(["esri/map", "dojox/layout/FloatingPane", "dijit/registry", "dojo/ready",
         "dojo/domReady!"],
        function (Map, FloatingPane, registry, ready) {
        ready(function () {
            pFP = registry.byId("testFloatingPane");
        })

        //pFP = new FloatingPane({
        //    title: "A floating pane",
        //    resizable: true, dockable: true, closable: false,
        //    //style: "position:relative;top:100px;left:0;width:400px;height:100px;visibility:hidden;",
        //    id: "pFloatingPane"
        //}, dojo.byId("testFLoatingPane"));
        //pFP.startup();

        map = new Map("map", {
            basemap: "topo",
            center: [-122.45, 37.75], // long, lat
            zoom: 13,
            sliderStyle: "small"
        });

        map.on("click", function () {
            pFP.show()
        });
        });
    </script>
</head>

<body class="claro">
    <div id="map"></div>
    <!--<div id="testFloatingPane"></div>-->
    <div id="testFloatingPane" data-dojo-type="dojox/layout/FloatingPane"
     data-dojo-props="title:'Search Results', closable:false, resizable:true, dockable:true"
     style="visibility: hidden;">
    <!--<div id="reportContainer" data-dojo-type="dijit/layout/ContentPane">
    </div>-->
    </div>
</body>
</html>

Answer 1

这是一个遗漏该行的案例

<script>dojoConfig = { parseOnLoad: true }</script>

它正常工作here（也修复了css中的一个错误）

我也可以省略它并使用parser.parse（）;在我准备好的功能中。

获取对FloatingPane的引用

1 个答案: