/ext-4.1.0_b3/docs/source/VBox.html

https://bitbucket.org/srogerf/javascript · HTML · 137 lines · 127 code · 10 blank · 0 comment · 0 complexity · b903004b6d8f482abb0679f68bd1f929 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-VBox'>/**
  19. </span> * A layout that arranges items vertically down a Container. This layout optionally divides available vertical space
  20. * between child items containing a numeric `flex` configuration.
  21. *
  22. * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
  23. *
  24. * @example
  25. * Ext.create('Ext.Panel', {
  26. * width: 500,
  27. * height: 400,
  28. * title: &quot;VBoxLayout Panel&quot;,
  29. * layout: {
  30. * type: 'vbox',
  31. * align: 'center'
  32. * },
  33. * renderTo: document.body,
  34. * items: [{
  35. * xtype: 'panel',
  36. * title: 'Inner Panel One',
  37. * width: 250,
  38. * flex: 2
  39. * },
  40. * {
  41. * xtype: 'panel',
  42. * title: 'Inner Panel Two',
  43. * width: 250,
  44. * flex: 4
  45. * },
  46. * {
  47. * xtype: 'panel',
  48. * title: 'Inner Panel Three',
  49. * width: '50%',
  50. * flex: 4
  51. * }]
  52. * });
  53. */
  54. Ext.define('Ext.layout.container.VBox', {
  55. /* Begin Definitions */
  56. alias: ['layout.vbox'],
  57. extend: 'Ext.layout.container.Box',
  58. alternateClassName: 'Ext.layout.VBoxLayout',
  59. /* End Definitions */
  60. <span id='Ext-layout-container-VBox-cfg-align'> /**
  61. </span> * @cfg {String} align
  62. * Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
  63. *
  64. * - **left** : **Default** child items are aligned horizontally at the **left** side of the container
  65. * - **center** : child items are aligned horizontally at the **mid-width** of the container
  66. * - **stretch** : child items are stretched horizontally to fill the width of the container
  67. * - **stretchmax** : child items are stretched horizontally to the size of the largest item.
  68. */
  69. align : 'left', // left, center, stretch, strechmax
  70. type: 'vbox',
  71. direction: 'vertical',
  72. horizontal: false,
  73. names: {
  74. // parallel
  75. lr: 'tb',
  76. left: 'top',
  77. leftCap: 'Top',
  78. right: 'bottom',
  79. position: 'top',
  80. width: 'height',
  81. widthCap: 'Height',
  82. widthIndex: 1,
  83. x: 'y',
  84. // perpendicular
  85. center: 'center',
  86. top: 'left',// 'before',
  87. topPosition: 'left',
  88. bottom: 'right',// 'after',
  89. height: 'width',
  90. heightCap: 'Width',
  91. heightIndex: 0,
  92. y: 'x'
  93. },
  94. sizePolicy: {
  95. flex: {
  96. '': {
  97. setsWidth: 0,
  98. setsHeight: 1
  99. },
  100. stretch: {
  101. setsWidth: 1,
  102. setsHeight: 1
  103. },
  104. stretchmax: {
  105. readsWidth: 1,
  106. setsWidth: 1,
  107. setsHeight: 1
  108. }
  109. },
  110. '': {
  111. setsWidth: 0,
  112. setsHeight: 0
  113. },
  114. stretch: {
  115. setsWidth: 1,
  116. setsHeight: 0
  117. },
  118. stretchmax: {
  119. readsWidth: 1,
  120. setsWidth: 1,
  121. setsHeight: 0
  122. }
  123. }
  124. });
  125. </pre>
  126. </body>
  127. </html>