LayoutContainer.js 3.4 KB

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