/hippo/src/main/webapp/ext/src/widgets/layout/ContainerLayout.js

http://hdbc.googlecode.com/ · JavaScript · 215 lines · 125 code · 15 blank · 75 comment · 40 complexity · 44a47d9487f7d8eefa7485d066ee57ec MD5 · raw file

  1. /*!
  2. * Ext JS Library 3.0.0
  3. * Copyright(c) 2006-2009 Ext JS, LLC
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. /**
  8. * @class Ext.layout.ContainerLayout
  9. * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
  10. * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> is configured into
  11. * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout
  12. * classes in Ext. It simply renders all child Components into the Container, performing no sizing or
  13. * positioning services. To utilize a layout that provides sizing and positioning of child Components,
  14. * specify an appropriate <tt>{@link Ext.Container#layout layout}</tt>.</p>
  15. * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  16. * configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  17. */
  18. Ext.layout.ContainerLayout = function(config){
  19. Ext.apply(this, config);
  20. };
  21. Ext.layout.ContainerLayout.prototype = {
  22. /**
  23. * @cfg {String} extraCls
  24. * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
  25. * customized styles to the container or any of its children using standard CSS rules. See
  26. * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
  27. * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
  28. * which assign a value by default:
  29. * <div class="mdetail-params"><ul>
  30. * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
  31. * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
  32. * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
  33. * </ul></div>
  34. * To configure the above Classes with an extra CSS class append to the default. For example,
  35. * for ColumnLayout:<pre><code>
  36. * extraCls: 'x-column custom-class'
  37. * </code></pre>
  38. * </p>
  39. */
  40. /**
  41. * @cfg {Boolean} renderHidden
  42. * True to hide each contained item on render (defaults to false).
  43. */
  44. /**
  45. * A reference to the {@link Ext.Component} that is active. For example, <pre><code>
  46. * if(myPanel.layout.activeItem.id == 'item-1') { ... }
  47. * </code></pre>
  48. * <tt>activeItem</tt> only applies to layout styles that can display items one at a time
  49. * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
  50. * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}.
  51. * @type {Ext.Component}
  52. * @property activeItem
  53. */
  54. // private
  55. monitorResize:false,
  56. // private
  57. activeItem : null,
  58. // private
  59. layout : function(){
  60. var target = this.container.getLayoutTarget();
  61. this.onLayout(this.container, target);
  62. this.container.fireEvent('afterlayout', this.container, this);
  63. },
  64. // private
  65. onLayout : function(ct, target){
  66. this.renderAll(ct, target);
  67. },
  68. // private
  69. isValidParent : function(c, target){
  70. return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
  71. },
  72. // private
  73. renderAll : function(ct, target){
  74. var items = ct.items.items;
  75. for(var i = 0, len = items.length; i < len; i++) {
  76. var c = items[i];
  77. if(c && (!c.rendered || !this.isValidParent(c, target))){
  78. this.renderItem(c, i, target);
  79. }
  80. }
  81. },
  82. // private
  83. renderItem : function(c, position, target){
  84. if(c && !c.rendered){
  85. c.render(target, position);
  86. this.configureItem(c, position);
  87. }else if(c && !this.isValidParent(c, target)){
  88. if(typeof position == 'number'){
  89. position = target.dom.childNodes[position];
  90. }
  91. target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
  92. c.container = target;
  93. this.configureItem(c, position);
  94. }
  95. },
  96. // private
  97. configureItem: function(c, position){
  98. if(this.extraCls){
  99. var t = c.getPositionEl ? c.getPositionEl() : c;
  100. t.addClass(this.extraCls);
  101. }
  102. if (this.renderHidden && c != this.activeItem) {
  103. c.hide();
  104. }
  105. if(c.doLayout){
  106. c.doLayout(false, this.forceLayout);
  107. }
  108. },
  109. // private
  110. onResize: function(){
  111. if(this.container.collapsed){
  112. return;
  113. }
  114. var b = this.container.bufferResize;
  115. if(b){
  116. if(!this.resizeTask){
  117. this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
  118. this.resizeBuffer = typeof b == 'number' ? b : 100;
  119. }
  120. this.resizeTask.delay(this.resizeBuffer);
  121. }else{
  122. this.runLayout();
  123. }
  124. },
  125. // private
  126. runLayout: function(){
  127. this.layout();
  128. this.container.onLayout();
  129. },
  130. // private
  131. setContainer : function(ct){
  132. if(this.monitorResize && ct != this.container){
  133. if(this.container){
  134. this.container.un('resize', this.onResize, this);
  135. this.container.un('bodyresize', this.onResize, this);
  136. }
  137. if(ct){
  138. ct.on({
  139. scope: this,
  140. resize: this.onResize,
  141. bodyresize: this.onResize
  142. });
  143. }
  144. }
  145. this.container = ct;
  146. },
  147. // private
  148. parseMargins : function(v){
  149. if(typeof v == 'number'){
  150. v = v.toString();
  151. }
  152. var ms = v.split(' ');
  153. var len = ms.length;
  154. if(len == 1){
  155. ms[1] = ms[0];
  156. ms[2] = ms[0];
  157. ms[3] = ms[0];
  158. }
  159. if(len == 2){
  160. ms[2] = ms[0];
  161. ms[3] = ms[1];
  162. }
  163. if(len == 3){
  164. ms[3] = ms[1];
  165. }
  166. return {
  167. top:parseInt(ms[0], 10) || 0,
  168. right:parseInt(ms[1], 10) || 0,
  169. bottom:parseInt(ms[2], 10) || 0,
  170. left:parseInt(ms[3], 10) || 0
  171. };
  172. },
  173. /**
  174. * The {@link Template Ext.Template} used by Field rendering layout classes (such as
  175. * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
  176. * labeled and styled form Field. A default Template is supplied, but this may be
  177. * overriden to create custom field structures. The template processes values returned from
  178. * {@link Ext.layout.FormLayout#getTemplateArgs}.
  179. * @property fieldTpl
  180. * @type Ext.Template
  181. */
  182. fieldTpl: (function() {
  183. var t = new Ext.Template(
  184. '<div class="x-form-item {itemCls}" tabIndex="-1">',
  185. '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
  186. '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
  187. '</div><div class="{clearCls}"></div>',
  188. '</div>'
  189. );
  190. t.disableFormats = true;
  191. return t.compile();
  192. })(),
  193. /*
  194. * Destroys this layout. This is a template method that is empty by default, but should be implemented
  195. * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
  196. * @protected
  197. */
  198. destroy : Ext.emptyFn
  199. };
  200. Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;