DojoX Layout

Version

Version 0.003

Release Date

Release date: 2007-06-01

Project state:

[expermental]

Credits

Pete Higgins Fredrik Johansson

Project description

placeholder for dijit.layout extensions. Currently only:

dojox.layout.FloatingPane - an extension on TitlePane for drag/drop operation, "docking" [minimize/maximize], and [soon] resizing.

dojox.layout.ResizeHandle - resize handle to attach to a domNode. works well on normal domNodes, but will require adding a resizeTo(w,h) method to any widget you wish to use it on. [experimental]

dojox.layout.ContentPane - an extension on dijit ContentPane. Supports inline scripts, inline styles, relative path adjustments and having a table tag as domNode.

dojox.layout.StretchPane -- an extension on dojox ContentPane Supports animated resizing and calculated sizes for nodes see test files for examples.

Dependencies

require Dojo Core, Dojo Base (fx), and Dijit.TitlePane, Dijit.layout.ContentPane

Installation:

checkout:

http://svn.dojotoolkit.org/var/src/dojo/dojox/layout/* http://svn.dojotoolkit.org/var/src/dojo/dijit/*

and require via: dojo.require("dojox.layout.FloatingPane"); or: dojo.require("dojox.layout.ContentPane");

Basic Usage:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<div dojoType="dojox.layout.FloatingPane" title="my title">
                Content To be Floated
        </div>

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<div dojoType="dojox.layout.ContentPane"
                 adjustPaths="true"
                 renderStyles="true"
                 executeScripts="true"
                 href="my/page/containing/scripts/and/styles/in/a/sub/folder.html"
        >
                Initial content, will be replace by href.
                paths in folder.html will be adjusted to match this page
        </div>

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<div id="panex" dojoType="dojox.layout.StretchPane"
                style="border: solid blue 1px; overflow:hidden"
                x="90" y="60" w="40+0.2*w" h="40"
     >Stretch horiz</div>