LayoutContainer.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. if (!dojo._hasResource["dijit.layout.LayoutContainer"]) { // _hasResource
  2. // checks added by
  3. // build. Do not use
  4. // _hasResource
  5. // directly in your
  6. // code.
  7. dojo._hasResource["dijit.layout.LayoutContainer"] = true;
  8. dojo.provide("dijit.layout.LayoutContainer");
  9. dojo.require("dijit.layout._LayoutWidget");
  10. dojo.declare("dijit.layout.LayoutContainer", dijit.layout._LayoutWidget, {
  11. // summary
  12. // Provides Delphi-style panel layout semantics.
  13. //
  14. // details
  15. // A LayoutContainer is a box with a specified size (like
  16. // style="width: 500px; height: 500px;"),
  17. // that contains children widgets marked with "layoutAlign" of
  18. // "left", "right", "bottom", "top", and "client".
  19. // It takes it's children marked as left/top/bottom/right, and
  20. // lays them out along the edges of the box,
  21. // and then it takes the child marked "client" and puts it into
  22. // the remaining space in the middle.
  23. //
  24. // Left/right positioning is similar to CSS's "float: left" and
  25. // "float: right",
  26. // and top/bottom positioning would be similar to "float: top"
  27. // and "float: bottom", if there were such
  28. // CSS.
  29. //
  30. // Note that there can only be one client element, but there can
  31. // be multiple left, right, top,
  32. // or bottom elements.
  33. //
  34. // usage
  35. // <style>
  36. // html, body{ height: 100%; width: 100%; }
  37. // </style>
  38. // <div dojoType="dijit.layout.LayoutContainer" style="width:
  39. // 100%; height: 100%">
  40. // <div dojoType="dijit.layout.ContentPane"
  41. // layoutAlign="top">header text</div>
  42. // <div dojoType="dijit.layout.ContentPane" layoutAlign="left"
  43. // style="width: 200px;">table of contents</div>
  44. // <div dojoType="dijit.layout.ContentPane"
  45. // layoutAlign="client">client area</div>
  46. // </div>
  47. //
  48. // Lays out each child in the natural order the children occur
  49. // in.
  50. // Basically each child is laid out into the "remaining space",
  51. // where "remaining space" is initially
  52. // the content area of this widget, but is reduced to a smaller
  53. // rectangle each time a child is added.
  54. //
  55. layout : function() {
  56. dijit.layout.layoutChildren(this.domNode, this._contentBox,
  57. this.getChildren());
  58. },
  59. addChild : function(/* Widget */child, /* Integer? */insertIndex) {
  60. dijit._Container.prototype.addChild.apply(this, arguments);
  61. if (this._started) {
  62. dijit.layout.layoutChildren(this.domNode,
  63. this._contentBox, this.getChildren());
  64. }
  65. },
  66. removeChild : function(/* Widget */widget) {
  67. dijit._Container.prototype.removeChild.apply(this,
  68. arguments);
  69. if (this._started) {
  70. dijit.layout.layoutChildren(this.domNode,
  71. this._contentBox, this.getChildren());
  72. }
  73. }
  74. });
  75. // This argument can be specified for the children of a LayoutContainer.
  76. // Since any widget can be specified as a LayoutContainer child, mix it
  77. // into the base widget class. (This is a hack, but it's effective.)
  78. dojo.extend(dijit._Widget, {
  79. // layoutAlign: String
  80. // "none", "left", "right", "bottom", "top", and "client".
  81. // See the LayoutContainer description for details on this
  82. // parameter.
  83. layoutAlign : 'none'
  84. });
  85. }