4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-layout-component-field-Field'>/**
19 </span> * @class Ext.layout.component.field.Field
20 * @extends Ext.layout.component.Component
21 * Layout class for components with {@link Ext.form.Labelable field labeling}, handling the sizing and alignment of
22 * the form control, label, and error message treatment.
25 Ext.define('Ext.layout.component.field.Field', {
27 /* Begin Definitions */
29 alias: ['layout.field'],
31 extend: 'Ext.layout.component.Component',
33 uses: ['Ext.tip.QuickTip', 'Ext.util.TextMetrics'],
39 beforeLayout: function(width, height) {
41 return me.callParent(arguments) || (!me.owner.preventMark && me.activeError !== me.owner.getActiveError());
44 onLayout: function(width, height) {
47 labelStrategy = me.getLabelStrategy(),
48 errorStrategy = me.getErrorStrategy(),
49 isDefined = Ext.isDefined,
50 isNumber = Ext.isNumber,
51 lastSize, autoWidth, autoHeight, info, undef;
53 lastSize = me.lastComponentSize || {};
54 if (!isDefined(width)) {
55 width = lastSize.width;
56 if (width < 0) { //first pass lastComponentSize.width is -Infinity
60 if (!isDefined(height)) {
61 height = lastSize.height;
62 if (height < 0) { //first pass lastComponentSize.height is -Infinity
66 autoWidth = !isNumber(width);
67 autoHeight = !isNumber(height);
71 autoHeight: autoHeight,
72 width: autoWidth ? owner.getBodyNaturalWidth() : width, //always give a pixel width
74 setOuterWidth: false, //whether the outer el width should be set to the calculated width
76 // insets for the bodyEl from each side of the component layout area
85 // NOTE the order of calculating insets and setting styles here is very important; we must first
86 // calculate and set horizontal layout alone, as the horizontal sizing of elements can have an impact
87 // on the vertical sizes due to wrapping, then calculate and set the vertical layout.
89 // perform preparation on the label and error (setting css classes, qtips, etc.)
90 labelStrategy.prepare(owner, info);
91 errorStrategy.prepare(owner, info);
93 // calculate the horizontal insets for the label and error
94 labelStrategy.adjustHorizInsets(owner, info);
95 errorStrategy.adjustHorizInsets(owner, info);
97 // set horizontal styles for label and error based on the current insets
98 labelStrategy.layoutHoriz(owner, info);
99 errorStrategy.layoutHoriz(owner, info);
101 // calculate the vertical insets for the label and error
102 labelStrategy.adjustVertInsets(owner, info);
103 errorStrategy.adjustVertInsets(owner, info);
105 // set vertical styles for label and error based on the current insets
106 labelStrategy.layoutVert(owner, info);
107 errorStrategy.layoutVert(owner, info);
109 // perform sizing of the elements based on the final dimensions and insets
110 if (autoWidth && autoHeight) {
111 // Don't use setTargetSize if auto-sized, so the calculated size is not reused next time
112 me.setElementSize(owner.el, (info.setOuterWidth ? info.width : undef), info.height);
114 me.setTargetSize((!autoWidth || info.setOuterWidth ? info.width : undef), info.height);
118 me.activeError = owner.getActiveError();
122 <span id='Ext-layout-component-field-Field-method-sizeBody'> /**
123 </span> * Perform sizing and alignment of the bodyEl (and children) to match the calculated insets.
125 sizeBody: function(info) {
128 insets = info.insets,
129 totalWidth = info.width,
130 totalHeight = info.height,
131 width = Ext.isNumber(totalWidth) ? totalWidth - insets.left - insets.right : totalWidth,
132 height = Ext.isNumber(totalHeight) ? totalHeight - insets.top - insets.bottom : totalHeight;
135 me.setElementSize(owner.bodyEl, width, height);
137 // size the bodyEl's inner contents if necessary
138 me.sizeBodyContents(width, height);
141 <span id='Ext-layout-component-field-Field-property-sizeBodyContents'> /**
142 </span> * Size the contents of the field body, given the full dimensions of the bodyEl. Does nothing by
143 * default, subclasses can override to handle their specific contents.
144 * @param {Number} width The bodyEl width
145 * @param {Number} height The bodyEl height
147 sizeBodyContents: Ext.emptyFn,
150 <span id='Ext-layout-component-field-Field-method-getLabelStrategy'> /**
151 </span> * Return the set of strategy functions from the {@link #labelStrategies labelStrategies collection}
152 * that is appropriate for the field's {@link Ext.form.Labelable#labelAlign labelAlign} config.
154 getLabelStrategy: function() {
156 strategies = me.labelStrategies,
157 labelAlign = me.owner.labelAlign;
158 return strategies[labelAlign] || strategies.base;
161 <span id='Ext-layout-component-field-Field-method-getErrorStrategy'> /**
162 </span> * Return the set of strategy functions from the {@link #errorStrategies errorStrategies collection}
163 * that is appropriate for the field's {@link Ext.form.Labelable#msgTarget msgTarget} config.
165 getErrorStrategy: function() {
168 strategies = me.errorStrategies,
169 msgTarget = owner.msgTarget;
170 return !owner.preventMark && Ext.isString(msgTarget) ?
171 (strategies[msgTarget] || strategies.elementId) :
177 <span id='Ext-layout-component-field-Field-property-labelStrategies'> /**
178 </span> * Collection of named strategies for laying out and adjusting labels to accommodate error messages.
179 * An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#labelAlign} config.
181 labelStrategies: (function() {
182 var applyIf = Ext.applyIf,
183 emptyFn = Ext.emptyFn,
185 prepare: function(owner, info) {
186 var cls = owner.labelCls + '-' + owner.labelAlign,
187 labelEl = owner.labelEl;
188 if (labelEl && !labelEl.hasCls(cls)) {
192 adjustHorizInsets: emptyFn,
193 adjustVertInsets: emptyFn,
194 layoutHoriz: emptyFn,
198 prepare: function(owner, info) {
199 base.prepare(owner, info);
200 // If auto width, add the label width to the body's natural width.
201 if (info.autoWidth) {
202 info.width += (!owner.labelEl ? 0 : owner.labelWidth + owner.labelPad);
204 // Must set outer width to prevent field from wrapping below floated label
205 info.setOuterWidth = true;
207 adjustHorizInsets: function(owner, info) {
209 info.insets.left += owner.labelWidth + owner.labelPad;
212 layoutHoriz: function(owner, info) {
213 // For content-box browsers we can't rely on Labelable.js#getLabelableRenderData
214 // setting the width style because it needs to account for the final calculated
215 // padding/border styles for the label. So we set the width programmatically here to
216 // normalize content-box sizing, while letting border-box browsers use the original
218 var labelEl = owner.labelEl;
219 if (labelEl && !owner.isLabelSized && !Ext.isBorderBox) {
220 labelEl.setWidth(owner.labelWidth);
221 owner.isLabelSized = true;
230 <span id='Ext-layout-component-field-Field-property-top'> /**
231 </span> * Label displayed above the bodyEl
234 adjustVertInsets: function(owner, info) {
235 var labelEl = owner.labelEl;
237 info.insets.top += Ext.util.TextMetrics.measure(labelEl, owner.fieldLabel, info.width).height +
238 labelEl.getFrameWidth('tb') + owner.labelPad;
243 <span id='Ext-layout-component-field-Field-property-left'> /**
244 </span> * Label displayed to the left of the bodyEl
248 <span id='Ext-layout-component-field-Field-property-right'> /**
249 </span> * Same as left, only difference is text-align in CSS
257 <span id='Ext-layout-component-field-Field-property-errorStrategies'> /**
258 </span> * Collection of named strategies for laying out and adjusting insets to accommodate error messages.
259 * An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#msgTarget} config.
261 errorStrategies: (function() {
262 function setDisplayed(el, displayed) {
263 var wasDisplayed = el.getStyle('display') !== 'none';
264 if (displayed !== wasDisplayed) {
265 el.setDisplayed(displayed);
269 function setStyle(el, name, value) {
270 if (el.getStyle(name) !== value) {
271 el.setStyle(name, value);
275 var applyIf = Ext.applyIf,
276 emptyFn = Ext.emptyFn,
278 prepare: function(owner) {
279 setDisplayed(owner.errorEl, false);
281 adjustHorizInsets: emptyFn,
282 adjustVertInsets: emptyFn,
283 layoutHoriz: emptyFn,
290 <span id='Ext-layout-component-field-Field-property-side'> /**
291 </span> * Error displayed as icon (with QuickTip on hover) to right of the bodyEl
294 prepare: function(owner) {
295 var errorEl = owner.errorEl;
296 errorEl.addCls(Ext.baseCSSPrefix + 'form-invalid-icon');
297 Ext.layout.component.field.Field.initTip();
298 errorEl.dom.setAttribute('data-errorqtip', owner.getActiveError() || '');
299 setDisplayed(errorEl, owner.hasActiveError());
301 adjustHorizInsets: function(owner, info) {
302 if (owner.autoFitErrors && owner.hasActiveError()) {
303 info.insets.right += owner.errorEl.getWidth();
306 layoutHoriz: function(owner, info) {
307 if (owner.hasActiveError()) {
308 setStyle(owner.errorEl, 'left', info.width - info.insets.right + 'px');
311 layoutVert: function(owner, info) {
312 if (owner.hasActiveError()) {
313 setStyle(owner.errorEl, 'top', info.insets.top + 'px');
318 <span id='Ext-layout-component-field-Field-property-under'> /**
319 </span> * Error message displayed underneath the bodyEl
322 prepare: function(owner) {
323 var errorEl = owner.errorEl,
324 cls = Ext.baseCSSPrefix + 'form-invalid-under';
325 if (!errorEl.hasCls(cls)) {
328 setDisplayed(errorEl, owner.hasActiveError());
330 adjustVertInsets: function(owner, info) {
331 if (owner.autoFitErrors) {
332 info.insets.bottom += owner.errorEl.getHeight();
335 layoutHoriz: function(owner, info) {
336 var errorEl = owner.errorEl,
337 insets = info.insets;
339 setStyle(errorEl, 'width', info.width - insets.right - insets.left + 'px');
340 setStyle(errorEl, 'marginLeft', insets.left + 'px');
344 <span id='Ext-layout-component-field-Field-property-qtip'> /**
345 </span> * Error displayed as QuickTip on hover of the field container
348 prepare: function(owner) {
349 setDisplayed(owner.errorEl, false);
350 Ext.layout.component.field.Field.initTip();
351 owner.getActionEl().dom.setAttribute('data-errorqtip', owner.getActiveError() || '');
355 <span id='Ext-layout-component-field-Field-property-title'> /**
356 </span> * Error displayed as title tip on hover of the field container
359 prepare: function(owner) {
360 setDisplayed(owner.errorEl, false);
361 owner.el.dom.title = owner.getActiveError() || '';
365 <span id='Ext-layout-component-field-Field-property-elementId'> /**
366 </span> * Error message displayed as content of an element with a given id elsewhere in the app
369 prepare: function(owner) {
370 setDisplayed(owner.errorEl, false);
371 var targetEl = Ext.fly(owner.msgTarget);
373 targetEl.dom.innerHTML = owner.getActiveError() || '';
374 targetEl.setDisplayed(owner.hasActiveError());
382 <span id='Ext-layout-component-field-Field-method-initTip'> /**
383 </span> * Use a custom QuickTip instance separate from the main QuickTips singleton, so that we
384 * can give it a custom frame style. Responds to errorqtip rather than the qtip property.
386 initTip: function() {
389 tip = this.tip = Ext.create('Ext.tip.QuickTip', {
390 baseCls: Ext.baseCSSPrefix + 'form-invalid-tip',
391 renderTo: Ext.getBody()
393 tip.tagConfig = Ext.apply({}, {attribute: 'errorqtip'}, tip.tagConfig);
397 <span id='Ext-layout-component-field-Field-method-destroyTip'> /**
398 </span> * Destroy the error tip instance.
400 destroyTip: function() {