How do I show a “dojox / layout / FloatingPane” on a “dijit / layout / BorderContainer”

Question

I'm using Dojo Toolkit 1.12. How can I show a dojox/layout/FloatingPane that moves on a dijit/layout/BorderContainer . The problem is that I do not know where srcNodeRef to locate it so that it can move across the screen. Thank you.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>`
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Prueba</title>
    <!-- Estilos -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/resources/dojo.css" media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/FloatingPane.css"  media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/ResizeHandle.css"  media="screen">
    <!-- CSS -->
    <style>
        body, html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;}
    </style>
    <!-- Libraries -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js">
    </script>
    <!-- Dojo -->        
    <script>
        require([
                "dijit/registry",
                "dijit/layout/BorderContainer",
                "dijit/layout/TabContainer",
                "dijit/layout/ContentPane",
                "dojox/layout/FloatingPane",
               "dojo/domReady!"
        ], function(
                registry,
                BorderContainer,
                TabContainer,
                ContentPane,
                FloatingPane) {
           //........................................................
           var border = new BorderContainer({
               design: "headline",
               style: "width: 100%; height: 100%; background-color: yellow;",
               design: "headline",
               liveSplitters: true,
               gutters: true
           }, "divBody");
           //........................................................
           border.addChild(
               new TabContainer({
                   region: "center",
                   id: "tabs",
                   tabPosition: "top"
               })
           );
           var tabs = registry.byId("tabs");
           tabs.addChild(
               new ContentPane({
                   content: "content Tab 1",
                   title: "Tab 1"
               })
           );
           tabs.addChild(
               new ContentPane({
                   content: "content Tab 2",
                   title: "Tab 2"
               })
           );
           //........................................................
           border.addChild(
               new ContentPane({
                   region: "top",
                   id: "top",
                   content: "HEADER"
               })
           );
           //........................................................
           border.addChild(
               new ContentPane({
                   region: "left",
                   id: "left", 
                   content: "LEFT",
                   splitter: true,
               })
           );
           //........................................................
           border.addChild(
               new ContentPane({
                   region: "bottom",
                   id: "footer",
                   content: "FOOTER",
                   splitter: false
               })
           );
           //........................................................
           border.startup();
           //........................................................
           var floating = new FloatingPane({
               id: "floating",
               title: "A floating pane",
               resizable: true,
               dockable: true,
               style: "position:absolute; top:0; left:0;width:100px; height:100px;"
           });
           floating.addChild(
               new ContentPane({
                   content: "FLOATING"
               })
           );
           floating.startup();
           //........................................................
       });
    </script>        
</head>
<body class="claro">
    <div id="divBody"></div>
</body>
</html>

Answer 1

take a look at this example

http://jsfiddle.net/icsteveoh/ADPZS/

FloatingPane has a property 'content' to set whatever the content you need. In this example, content is set as part of declaration ie while creating the FloatingPane. If you want to set content dynamically, you can use

dijit.byId('yourfloatingpaneid').set('content',"Hello again");

Hope this helps

How do I show a “dojox / layout / FloatingPane” on a “dijit / layout / BorderContainer”

Question

1 answers

solution1
0 ACCPTED 2017-08-11 16:51:55

How do I show a “dojox / layout / FloatingPane” on a “dijit / layout / BorderContainer”

Question

1 answers

solution1 0 ACCPTED 2017-08-11 16:51:55

solution1
0 ACCPTED 2017-08-11 16:51:55