/ext-4.1.0_b3/docs/source/Form.html
HTML | 165 lines | 149 code | 16 blank | 0 comment | 0 complexity | f5615c5130d1c8ebb0deb0297131e974 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-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: "FormLayout Panel",
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 */
65Ext.define('Ext.layout.container.Form', {
66
67 /* Begin Definitions */
68
69 alias: 'layout.form',
70 extend: 'Ext.layout.container.Auto',
71 alternateClassName: 'Ext.layout.FormLayout',
72
73 /* End Definitions */
74
75 type: 'form',
76
77 manageOverflow: 2,
78
79 childEls: ['formTable'],
80
81 renderTpl: [
82 '<table id="{ownerId}-formTable" style="width:100%" cellspacing="0" cellpadding="0">',
83 '{%this.renderBody(out,values)%}',
84 '</table>',
85 '{%this.renderPadder(out,values)%}'
86 ],
87
88 calculate : function (ownerContext) {
89 var me = this,
90 containerSize = me.getContainerSize(ownerContext, true),
91 tableWidth,
92 childItems,
93 i = 0, length;
94
95 // Once we have been widthed, we can impose that width (in a non-dirty setting) upon all children at once
96 if (containerSize.gotWidth) {
97 this.callParent(arguments);
98 tableWidth = me.formTable.dom.offsetWidth;
99 childItems = ownerContext.childItems;
100
101 for (length = childItems.length; i < length; ++i) {
102 childItems[i].setWidth(tableWidth, false);
103 }
104 } else {
105 me.done = false;
106 }
107 },
108
109 getRenderTarget: function() {
110 return this.formTable;
111 },
112
113 getRenderTree: function() {
114 var result = this.callParent(arguments),
115 i = 0, len = result.length,
116 prefix = Ext.baseCSSPrefix,
117 children = '<tr><td class="' + prefix + 'form-item-pad" colspan="3"></td></tr>',
118 bodyCls = prefix + 'form-layout-tbody',
119 item;
120
121 for (; i < len; i++) {
122 item = result[i];
123 if (item.tag && item.tag == 'table') {
124 item.tag = 'tbody';
125 item.cls += ' ' + bodyCls;
126 delete item.cellspacing;
127 delete item.cellpadding;
128 item.cn = children;
129 } else {
130 result[i] = {
131 tag: 'tbody',
132 cls: bodyCls,
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 }
145 return result;
146 },
147
148 isValidParent: function(item, target, position) {
149 return true;
150 },
151
152 isItemShrinkWrap: function(item) {
153 return ((item.shrinkWrap === true) ? 3 : item.shrinkWrap||0) & 2;
154 },
155
156 getItemSizePolicy: function(item) {
157 return {
158 setsWidth: 1,
159 setsHeight: 0
160 }
161 }
162});
163</pre>
164</body>
165</html>