[Dojo-interest] Adding content to FloatingPane
ethias at satx.rr.com
Sat Apr 29 17:03:39 MDT 2006
To summarize: How can we create a FloatingPane programatically
and then add other dojo widgets or HTML input tags to the FloatingPane
show what I've learned so far in hopes progressing towards a solution.
1. I want to build the following HTML programatically. As you can see from
the below example I have a SplitPane with one ContentPane on it. I want to
FloatingPane(s) to the ContentPane named "toolkitpalette". Notice the HTML
<input> tag within the FloatingPane. This static HTML visually looks and
behaves as I would like it too with one exception. The FloatingPane
contains the HTML input
field of type text which takes up 100% of the FloatingPane, can be resized
Life is basically good here except when trying to move (drag) the floating
pane around. The
mouse position and the drag position do not match.
<div dojoType="SplitPane" orientation="vertical" sizerWidth="5"
activeSizing="0" style="width: 100%; height: 100%;" sizeMin="50"
<div dojoType="ContentPane" id="toolkitpalette">
style="width: 250px; height: 100px;" resizable="true"
<!-- Create this HTML input field on top of the floating
<input type="text" style="width:100%;height:100%" />
</div> <!-- FloatingPane t1 -->
</div> <!-- ContentPane toolkitpalette -->
</div> <!-- SplitPane Right -->
Now, how can we accomplish this programatically. We want to create the
FloatingPane, add the <input type=text> to it, then add the FloatingPane to
the ContentPane. Here's what I would expect to work but the floating pane
doesn't look right. The size widget is at the top left, and yes...life is
not too good.
// The target node is a ContentPane
var targetNode = e.originalTarget;
// Create the input field of type text
var newControl = document.createElement("input");
// I put a border around the input field so I could try to see where it is
// Also, its width is 100% because we want it to size along with the
var controlStyle = "width: 100%;border: 2px solid black";
// now create the floating pane
var newEl = dojo.widget.createWidget("FloatingPane",
Field",resizable: true,id:"mynewfloatpane",titleBarDisplay: "simple"});
// Add the new input text control to the floating pane.
// We want the floating pane position to be upper left corner of the content
var newElStyle = "width: 250px; height:
newEl.domNode.style.cssText = newElStyle;
// Finally, add the floating pane to the target content pane
The resulting FloatingPane is quite hosed. I tried a number of other coding
possibilities over the
last couple of days but nothing seems to work consistently.
Any help would be greatly appreciated.
More information about the Dojo-interest