/ext-4.0.7/docs/source/Auto2.html

https://bitbucket.org/srogerf/javascript · HTML · 97 lines · 86 code · 11 blank · 0 comment · 0 complexity · 168f4cd8a0d884bb775f11fed86eeb1b MD5 · raw file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-layout-container-Auto'>/**
  19. </span> * @class Ext.layout.container.Auto
  20. * @extends Ext.layout.container.Container
  21. *
  22. * The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
  23. * render any child Components when no `{@link Ext.container.Container#layout layout}` is configured into
  24. * a `{@link Ext.container.Container Container}.` AutoLayout provides only a passthrough of any layout calls
  25. * to any child containers.
  26. *
  27. * @example
  28. * Ext.create('Ext.Panel', {
  29. * width: 500,
  30. * height: 280,
  31. * title: &quot;AutoLayout Panel&quot;,
  32. * layout: 'auto',
  33. * renderTo: document.body,
  34. * items: [{
  35. * xtype: 'panel',
  36. * title: 'Top Inner Panel',
  37. * width: '75%',
  38. * height: 90
  39. * },
  40. * {
  41. * xtype: 'panel',
  42. * title: 'Bottom Inner Panel',
  43. * width: '75%',
  44. * height: 90
  45. * }]
  46. * });
  47. */
  48. Ext.define('Ext.layout.container.Auto', {
  49. /* Begin Definitions */
  50. alias: ['layout.auto', 'layout.autocontainer'],
  51. extend: 'Ext.layout.container.Container',
  52. /* End Definitions */
  53. type: 'autocontainer',
  54. bindToOwnerCtComponent: true,
  55. // @private
  56. onLayout : function(owner, target) {
  57. var me = this,
  58. items = me.getLayoutItems(),
  59. ln = items.length,
  60. i;
  61. // Ensure the Container is only primed with the clear element if there are child items.
  62. if (ln) {
  63. // Auto layout uses natural HTML flow to arrange the child items.
  64. // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
  65. // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
  66. if (!me.clearEl) {
  67. me.clearEl = me.getRenderTarget().createChild({
  68. cls: Ext.baseCSSPrefix + 'clear',
  69. role: 'presentation'
  70. });
  71. }
  72. // Auto layout allows CSS to size its child items.
  73. for (i = 0; i &lt; ln; i++) {
  74. me.setItemSize(items[i]);
  75. }
  76. }
  77. },
  78. configureItem: function(item) {
  79. this.callParent(arguments);
  80. // Auto layout does not manage any dimensions.
  81. item.layoutManagedHeight = 2;
  82. item.layoutManagedWidth = 2;
  83. }
  84. });</pre>
  85. </body>
  86. </html>