<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-layout-component-field-Field'>/**
|
</span> * Layout class for components with {@link Ext.form.Labelable field labeling}, handling the sizing and alignment of
|
* the form control, label, and error message treatment.
|
* @private
|
*/
|
Ext.define('Ext.layout.component.field.Field', {
|
|
/* Begin Definitions */
|
|
extend: 'Ext.layout.component.Auto',
|
|
alias: 'layout.field',
|
|
uses: ['Ext.tip.QuickTip', 'Ext.util.TextMetrics', 'Ext.util.CSS'],
|
|
<span id='Ext-layout-component-field-Field-property-type'> /* End Definitions */
|
</span>
|
type: 'field',
|
|
<span id='Ext-layout-component-field-Field-property-naturalSizingProp'> naturalSizingProp: 'size',
|
</span>
|
<span id='Ext-layout-component-field-Field-method-beginLayout'> beginLayout: function(ownerContext) {
|
</span> var me = this,
|
owner = me.owner;
|
|
me.callParent(arguments);
|
|
ownerContext.labelStrategy = me.getLabelStrategy();
|
ownerContext.errorStrategy = me.getErrorStrategy();
|
|
ownerContext.labelContext = ownerContext.getEl('labelEl');
|
ownerContext.bodyCellContext = ownerContext.getEl('bodyEl');
|
ownerContext.inputContext = ownerContext.getEl('inputEl');
|
ownerContext.errorContext = ownerContext.getEl('errorEl');
|
|
// width:100% on an element inside a table in IE6/7 "strict" sizes the content box.
|
// store the input element's border and padding info so that subclasses can take it into consideration if needed
|
if (Ext.isIE7m && Ext.isStrict && ownerContext.inputContext) {
|
me.ieInputWidthAdjustment = ownerContext.inputContext.getPaddingInfo().width + ownerContext.inputContext.getBorderInfo().width;
|
}
|
|
// perform preparation on the label and error (setting css classes, qtips, etc.)
|
ownerContext.labelStrategy.prepare(ownerContext, owner);
|
ownerContext.errorStrategy.prepare(ownerContext, owner);
|
},
|
|
<span id='Ext-layout-component-field-Field-method-beginLayoutCycle'> beginLayoutCycle: function(ownerContext){
|
</span> var me = this,
|
owner = me.owner,
|
widthModel = ownerContext.widthModel,
|
ownerNaturalSize = owner[me.naturalSizingProp],
|
width;
|
|
me.callParent(arguments);
|
// Body cell must stretch to use up available width unless the field is auto width
|
if (widthModel.shrinkWrap) {
|
// When the width needs to be auto, table-layout cannot be fixed
|
me.beginLayoutShrinkWrap(ownerContext);
|
} else if (widthModel.natural) {
|
|
// When a size specified, natural becomes fixed width unless the inpiutWidth is specified - we shrinkwrap that
|
if (typeof ownerNaturalSize == 'number' && !owner.inputWidth) {
|
me.beginLayoutFixed(ownerContext, (width = ownerNaturalSize * 6.5 + 20), 'px');
|
}
|
|
// Otherwise it is the same as shrinkWrap
|
else {
|
me.beginLayoutShrinkWrap(ownerContext);
|
}
|
ownerContext.setWidth(width, false);
|
} else {
|
me.beginLayoutFixed(ownerContext, '100', '%');
|
}
|
},
|
|
<span id='Ext-layout-component-field-Field-method-beginLayoutFixed'> beginLayoutFixed: function (ownerContext, width, suffix) {
|
</span> var owner = ownerContext.target,
|
inputEl = owner.inputEl,
|
inputWidth = owner.inputWidth;
|
|
owner.el.setStyle('table-layout', 'fixed');
|
owner.bodyEl.setStyle('width', width + suffix);
|
if (inputEl) {
|
if (inputWidth) {
|
inputEl.setStyle('width', inputWidth + 'px');
|
} else {
|
inputEl.setStyle('width', owner.stretchInputElFixed ? '100%' : '');
|
}
|
}
|
ownerContext.isFixed = true;
|
},
|
|
<span id='Ext-layout-component-field-Field-method-beginLayoutShrinkWrap'> beginLayoutShrinkWrap: function (ownerContext) {
|
</span> var owner = ownerContext.target,
|
inputEl = owner.inputEl,
|
inputWidth = owner.inputWidth;
|
|
if (inputEl && inputEl.dom) {
|
inputEl.dom.removeAttribute('size');
|
if (inputWidth) {
|
inputEl.setStyle('width', inputWidth + 'px');
|
} else {
|
inputEl.setStyle('width', '');
|
}
|
}
|
owner.el.setStyle('table-layout', 'auto');
|
owner.bodyEl.setStyle('width', '');
|
},
|
|
<span id='Ext-layout-component-field-Field-method-finishedLayout'> finishedLayout: function(ownerContext){
|
</span> var owner = this.owner;
|
|
this.callParent(arguments);
|
ownerContext.labelStrategy.finishedLayout(ownerContext, owner);
|
ownerContext.errorStrategy.finishedLayout(ownerContext, owner);
|
},
|
|
<span id='Ext-layout-component-field-Field-method-calculateOwnerHeightFromContentHeight'> calculateOwnerHeightFromContentHeight: function(ownerContext, contentHeight) {
|
</span> return contentHeight;
|
},
|
|
<span id='Ext-layout-component-field-Field-method-measureContentHeight'> measureContentHeight: function (ownerContext) {
|
</span> return ownerContext.el.getHeight();
|
},
|
|
<span id='Ext-layout-component-field-Field-method-measureContentWidth'> measureContentWidth: function (ownerContext) {
|
</span> return ownerContext.el.getWidth();
|
},
|
|
<span id='Ext-layout-component-field-Field-method-measureLabelErrorHeight'> measureLabelErrorHeight: function (ownerContext) {
|
</span> return ownerContext.labelStrategy.getHeight(ownerContext) +
|
ownerContext.errorStrategy.getHeight(ownerContext);
|
},
|
|
<span id='Ext-layout-component-field-Field-method-onFocus'> onFocus: function() {
|
</span> this.getErrorStrategy().onFocus(this.owner);
|
},
|
|
<span id='Ext-layout-component-field-Field-method-getLabelStrategy'> /**
|
</span> * Return the set of strategy functions from the {@link #labelStrategies labelStrategies collection}
|
* that is appropriate for the field's {@link Ext.form.Labelable#labelAlign labelAlign} config.
|
*/
|
getLabelStrategy: function() {
|
var me = this,
|
strategies = me.labelStrategies,
|
labelAlign = me.owner.labelAlign;
|
return strategies[labelAlign] || strategies.base;
|
},
|
|
<span id='Ext-layout-component-field-Field-method-getErrorStrategy'> /**
|
</span> * Return the set of strategy functions from the {@link #errorStrategies errorStrategies collection}
|
* that is appropriate for the field's {@link Ext.form.Labelable#msgTarget msgTarget} config.
|
*/
|
getErrorStrategy: function() {
|
var me = this,
|
owner = me.owner,
|
strategies = me.errorStrategies,
|
msgTarget = owner.msgTarget;
|
return !owner.preventMark && Ext.isString(msgTarget) ?
|
(strategies[msgTarget] || strategies.elementId) :
|
strategies.none;
|
},
|
|
<span id='Ext-layout-component-field-Field-property-labelStrategies'> /**
|
</span> * Collection of named strategies for laying out and adjusting labels to accommodate error messages.
|
* An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#labelAlign} config.
|
*/
|
labelStrategies: (function() {
|
var base = {
|
prepare: function(ownerContext, owner) {
|
var cls = owner.labelCls + '-' + owner.labelAlign,
|
labelEl = owner.labelEl;
|
|
if (labelEl) {
|
labelEl.addCls(cls);
|
}
|
},
|
|
getHeight: function () {
|
return 0;
|
},
|
|
finishedLayout: Ext.emptyFn
|
};
|
|
return {
|
base: base,
|
|
<span id='Ext-layout-component-field-Field-property-top'> /**
|
</span> * Label displayed above the bodyEl
|
*/
|
top: Ext.applyIf({
|
|
getHeight: function (ownerContext) {
|
var labelContext = ownerContext.labelContext,
|
props = labelContext.props,
|
height = props.height;
|
|
if (height === undefined) {
|
props.height = height = labelContext.el.getHeight();
|
}
|
|
return height;
|
}
|
}, base),
|
|
<span id='Ext-layout-component-field-Field-property-left'> /**
|
</span> * Label displayed to the left of the bodyEl
|
*/
|
left: base,
|
|
<span id='Ext-layout-component-field-Field-property-right'> /**
|
</span> * Same as left, only difference is text-align in CSS
|
*/
|
right: base
|
};
|
}()),
|
|
<span id='Ext-layout-component-field-Field-property-errorStrategies'> /**
|
</span> * Collection of named strategies for laying out and adjusting insets to accommodate error messages.
|
* An appropriate one will be chosen based on the owner field's {@link Ext.form.Labelable#msgTarget} config.
|
*/
|
errorStrategies: (function() {
|
function showTip(owner) {
|
var tip = Ext.layout.component.field.Field.tip,
|
target;
|
|
if (tip && tip.isVisible()) {
|
target = tip.activeTarget;
|
if (target && target.el === owner.getActionEl().dom) {
|
tip.toFront(true);
|
}
|
}
|
}
|
|
var applyIf = Ext.applyIf,
|
emptyFn = Ext.emptyFn,
|
iconCls = Ext.baseCSSPrefix + 'form-invalid-icon',
|
iconWidth,
|
base = {
|
prepare: function(ownerContext, owner) {
|
var el = owner.errorEl;
|
if (el) {
|
el.setDisplayed(false);
|
}
|
},
|
getHeight: function () {
|
return 0;
|
},
|
onFocus: emptyFn,
|
finishedLayout: emptyFn
|
};
|
|
return {
|
none: base,
|
|
<span id='Ext-layout-component-field-Field-property-side'> /**
|
</span> * Error displayed as icon (with QuickTip on hover) to right of the bodyEl
|
*/
|
side: applyIf({
|
prepare: function(ownerContext, owner) {
|
var errorEl = owner.errorEl,
|
sideErrorCell = owner.sideErrorCell,
|
displayError = owner.hasActiveError(),
|
tempEl;
|
|
// Capture error icon width once
|
if (!iconWidth) {
|
iconWidth = (tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: iconCls})).getWidth();
|
tempEl.remove();
|
}
|
|
errorEl.addCls(iconCls);
|
errorEl.set({'data-errorqtip': owner.getActiveError() || ''});
|
if (owner.autoFitErrors) {
|
errorEl.setDisplayed(displayError);
|
}
|
// Not autofitting, the space must still be allocated.
|
else {
|
errorEl.setVisible(displayError);
|
}
|
|
// If we are auto fitting, then hide and show the entire cell
|
if (sideErrorCell && owner.autoFitErrors) {
|
sideErrorCell.setDisplayed(displayError);
|
}
|
owner.bodyEl.dom.colSpan = owner.getBodyColspan();
|
|
// TODO: defer the tip call until after the layout to avoid immediate DOM reads now
|
Ext.layout.component.field.Field.initTip();
|
},
|
onFocus: showTip
|
}, base),
|
|
<span id='Ext-layout-component-field-Field-property-under'> /**
|
</span> * Error message displayed underneath the bodyEl
|
*/
|
under: applyIf({
|
prepare: function(ownerContext, owner) {
|
var errorEl = owner.errorEl,
|
cls = Ext.baseCSSPrefix + 'form-invalid-under';
|
|
errorEl.addCls(cls);
|
errorEl.setDisplayed(owner.hasActiveError());
|
},
|
getHeight: function (ownerContext) {
|
var height = 0,
|
errorContext, props;
|
|
if (ownerContext.target.hasActiveError()) {
|
errorContext = ownerContext.errorContext;
|
props = errorContext.props;
|
height = props.height;
|
|
if (height === undefined) {
|
props.height = height = errorContext.el.getHeight();
|
}
|
}
|
|
return height;
|
}
|
}, base),
|
|
<span id='Ext-layout-component-field-Field-property-qtip'> /**
|
</span> * Error displayed as QuickTip on hover of the field container
|
*/
|
qtip: applyIf({
|
prepare: function(ownerContext, owner) {
|
Ext.layout.component.field.Field.initTip();
|
owner.getActionEl().dom.setAttribute('data-errorqtip', owner.getActiveError() || '');
|
},
|
onFocus: showTip
|
}, base),
|
|
<span id='Ext-layout-component-field-Field-property-title'> /**
|
</span> * Error displayed as title tip on hover of the field container
|
*/
|
title: applyIf({
|
prepare: function(ownerContext, owner) {
|
owner.getActionEl().dom.setAttribute('title', owner.getActiveError() || '');
|
}
|
}, base),
|
|
<span id='Ext-layout-component-field-Field-property-elementId'> /**
|
</span> * Error message displayed as content of an element with a given id elsewhere in the app
|
*/
|
elementId: applyIf({
|
prepare: function(ownerContext, owner) {
|
var targetEl = Ext.fly(owner.msgTarget);
|
if (targetEl) {
|
targetEl.dom.innerHTML = owner.getActiveError() || '';
|
targetEl.setDisplayed(owner.hasActiveError());
|
}
|
}
|
}, base)
|
};
|
}()),
|
|
statics: {
|
<span id='Ext-layout-component-field-Field-static-method-initTip'> /**
|
</span> * Use a custom QuickTip instance separate from the main QuickTips singleton, so that we
|
* can give it a custom frame style. Responds to errorqtip rather than the qtip property.
|
* @static
|
*/
|
initTip: function() {
|
var tip = this.tip;
|
if (!tip) {
|
tip = this.tip = Ext.create('Ext.tip.QuickTip', {
|
ui: 'form-invalid'
|
});
|
tip.tagConfig = Ext.apply({}, {attribute: 'errorqtip'}, tip.tagConfig);
|
}
|
},
|
|
<span id='Ext-layout-component-field-Field-static-method-destroyTip'> /**
|
</span> * Destroy the error tip instance.
|
* @static
|
*/
|
destroyTip: function() {
|
var tip = this.tip;
|
if (tip) {
|
tip.destroy();
|
delete this.tip;
|
}
|
}
|
}
|
});</pre>
|
</body>
|
</html>
|
