lib/dijit/layout/LayoutContainer.js.uncompressed.js

   1 define("dijit/layout/LayoutContainer", [
   2         "dojo/_base/kernel", // kernel.deprecated
   3         "dojo/_base/lang",
   4         "dojo/_base/declare", // declare
   5         "../_WidgetBase",
   6         "./_LayoutWidget",
   7         "./utils"               // layoutUtils.layoutChildren
   8 ], function(kernel, lang, declare, _WidgetBase, _LayoutWidget, layoutUtils){
   9
  10 // module:
  11 //              dijit/layout/LayoutContainer
  12
  13 var LayoutContainer = declare("dijit.layout.LayoutContainer", _LayoutWidget, {
  14         // summary:
  15         //              Deprecated.  Use `dijit/layout/BorderContainer` instead.
  16         // description:
  17         //              Provides Delphi-style panel layout semantics.
  18         //
  19         //              A LayoutContainer is a box with a specified size (like style="width: 500px; height: 500px;"),
  20         //              that contains children widgets marked with "layoutAlign" of "left", "right", "bottom", "top", and "client".
  21         //              It takes it's children marked as left/top/bottom/right, and lays them out along the edges of the box,
  22         //              and then it takes the child marked "client" and puts it into the remaining space in the middle.
  23         //
  24         //              Left/right positioning is similar to CSS's "float: left" and "float: right",
  25         //              and top/bottom positioning would be similar to "float: top" and "float: bottom", if there were such
  26         //              CSS.
  27         //
  28         //              Note that there can only be one client element, but there can be multiple left, right, top,
  29         //              or bottom elements.
  30         //
  31         //              See `LayoutContainer.ChildWidgetProperties` for details on the properties that can be set on
  32         //              children of a `LayoutContainer`.
  33         //
  34         // example:
  35         // |    <style>
  36         // |            html, body{ height: 100%; width: 100%; }
  37         // |    </style>
  38         // |    <div data-dojo-type="dijit/layout/LayoutContainer" style="width: 100%; height: 100%">
  39         // |            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="layoutAlign: 'top'">header text</div>
  40         // |            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="layoutAlign: 'left'" style="width: 200px;">table of contents</div>
  41         // |            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="layoutAlign: 'client'">client area</div>
  42         // |    </div>
  43         //
  44         //              Lays out each child in the natural order the children occur in.
  45         //              Basically each child is laid out into the "remaining space", where "remaining space" is initially
  46         //              the content area of this widget, but is reduced to a smaller rectangle each time a child is added.
  47         // tags:
  48         //              deprecated
  49
  50         baseClass: "dijitLayoutContainer",
  51
  52         constructor: function(){
  53                 kernel.deprecated("dijit.layout.LayoutContainer is deprecated", "use BorderContainer instead", 2.0);
  54         },
  55
  56         layout: function(){
  57                 layoutUtils.layoutChildren(this.domNode, this._contentBox, this.getChildren());
  58         },
  59
  60         addChild: function(/*dijit/_WidgetBase*/ child, /*Integer?*/ insertIndex){
  61                 this.inherited(arguments);
  62                 if(this._started){
  63                         layoutUtils.layoutChildren(this.domNode, this._contentBox, this.getChildren());
  64                 }
  65         },
  66
  67         removeChild: function(/*dijit/_WidgetBase*/ widget){
  68                 this.inherited(arguments);
  69                 if(this._started){
  70                         layoutUtils.layoutChildren(this.domNode, this._contentBox, this.getChildren());
  71                 }
  72         }
  73 });
  74
  75 LayoutContainer.ChildWidgetProperties = {
  76         // summary:
  77         //              This property can be specified for the children of a LayoutContainer.
  78
  79         // layoutAlign: String
  80         //              "none", "left", "right", "bottom", "top", and "client".
  81         //              See the LayoutContainer description for details on this parameter.
  82         layoutAlign: 'none'
  83 };
  84
  85 // Since any widget can be specified as a LayoutContainer child, mix it
  86 // into the base widget class.  (This is a hack, but it's effective.)
  87 // This is for the benefit of the parser.   Remove for 2.0.  Also, hide from doc viewer.
  88 lang.extend(_WidgetBase, /*===== {} || =====*/ LayoutContainer.ChildWidgetProperties);
  89
  90 return LayoutContainer;
  91 });