Form.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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-Form'>/**
  19. </span> * This is a layout that will render form Fields, one under the other all stretched to the Container width.
  20. *
  21. * @example
  22. * Ext.create('Ext.Panel', {
  23. * width: 500,
  24. * height: 300,
  25. * title: &quot;FormLayout Panel&quot;,
  26. * layout: 'form',
  27. * renderTo: Ext.getBody(),
  28. * bodyPadding: 5,
  29. * defaultType: 'textfield',
  30. * items: [{
  31. * fieldLabel: 'First Name',
  32. * name: 'first',
  33. * allowBlank:false
  34. * },{
  35. * fieldLabel: 'Last Name',
  36. * name: 'last'
  37. * },{
  38. * fieldLabel: 'Company',
  39. * name: 'company'
  40. * }, {
  41. * fieldLabel: 'Email',
  42. * name: 'email',
  43. * vtype:'email'
  44. * }, {
  45. * fieldLabel: 'DOB',
  46. * name: 'dob',
  47. * xtype: 'datefield'
  48. * }, {
  49. * fieldLabel: 'Age',
  50. * name: 'age',
  51. * xtype: 'numberfield',
  52. * minValue: 0,
  53. * maxValue: 100
  54. * }, {
  55. * xtype: 'timefield',
  56. * fieldLabel: 'Time',
  57. * name: 'time',
  58. * minValue: '8:00am',
  59. * maxValue: '6:00pm'
  60. * }]
  61. * });
  62. *
  63. * Note that any configured {@link Ext.Component#padding padding} will be ignored on items within a Form layout.
  64. */
  65. Ext.define('Ext.layout.container.Form', {
  66. /* Begin Definitions */
  67. alias: 'layout.form',
  68. extend: 'Ext.layout.container.Auto',
  69. alternateClassName: 'Ext.layout.FormLayout',
  70. /* End Definitions */
  71. tableCls: Ext.baseCSSPrefix + 'form-layout-table',
  72. type: 'form',
  73. manageOverflow: 2,
  74. childEls: ['formTable'],
  75. padRow: '&lt;tr&gt;&lt;td class=&quot;' + Ext.baseCSSPrefix + 'form-item-pad&quot; colspan=&quot;3&quot;&gt;&lt;/td&gt;&lt;/tr&gt;',
  76. renderTpl: [
  77. '&lt;table id=&quot;{ownerId}-formTable&quot; class=&quot;{tableCls}&quot; style=&quot;width:100%&quot; cellpadding=&quot;0&quot;&gt;',
  78. '{%this.renderBody(out,values)%}',
  79. '&lt;/table&gt;',
  80. '{%this.renderPadder(out,values)%}'
  81. ],
  82. getRenderData: function(){
  83. var data = this.callParent();
  84. data.tableCls = this.tableCls;
  85. return data;
  86. },
  87. calculate : function (ownerContext) {
  88. var me = this,
  89. containerSize = me.getContainerSize(ownerContext, true),
  90. tableWidth,
  91. childItems,
  92. i = 0, length;
  93. // Once we have been widthed, we can impose that width (in a non-dirty setting) upon all children at once
  94. if (containerSize.gotWidth) {
  95. this.callParent(arguments);
  96. tableWidth = me.formTable.dom.offsetWidth;
  97. childItems = ownerContext.childItems;
  98. for (length = childItems.length; i &lt; length; ++i) {
  99. childItems[i].setWidth(tableWidth, false);
  100. }
  101. } else {
  102. me.done = false;
  103. }
  104. },
  105. getRenderTarget: function() {
  106. return this.formTable;
  107. },
  108. getRenderTree: function() {
  109. var me = this,
  110. result = me.callParent(arguments),
  111. i, len;
  112. for (i = 0, len = result.length; i &lt; len; i++) {
  113. result[i] = me.transformItemRenderTree(result[i]);
  114. }
  115. return result;
  116. },
  117. transformItemRenderTree: function(item) {
  118. if (item.tag &amp;&amp; item.tag == 'table') {
  119. item.tag = 'tbody';
  120. delete item.cellspacing;
  121. delete item.cellpadding;
  122. // IE6 doesn't separate cells nicely to provide input field
  123. // vertical separation. It also does not support transparent borders
  124. // which is how the extra 1px is added to the 2px each side cell spacing.
  125. // So it needs a 5px high pad row.
  126. if (Ext.isIE6) {
  127. item.cn = this.padRow;
  128. }
  129. return item;
  130. }
  131. return {
  132. tag: 'tbody',
  133. cn: {
  134. tag: 'tr',
  135. cn: {
  136. tag: 'td',
  137. colspan: 3,
  138. style: 'width:100%',
  139. cn: item
  140. }
  141. }
  142. };
  143. },
  144. isValidParent: function(item, target, position) {
  145. return true;
  146. },
  147. isItemShrinkWrap: function(item) {
  148. return ((item.shrinkWrap === true) ? 3 : item.shrinkWrap||0) &amp; 2;
  149. },
  150. getItemSizePolicy: function(item) {
  151. return {
  152. setsWidth: 1,
  153. setsHeight: 0
  154. };
  155. }
  156. });
  157. </pre>
  158. </body>
  159. </html>