/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* 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'],
|
|
/* End Definitions */
|
|
type: 'field',
|
|
naturalSizingProp: 'size',
|
|
beginLayout: function(ownerContext) {
|
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);
|
},
|
|
beginLayoutCycle: function(ownerContext){
|
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', '%');
|
}
|
},
|
|
beginLayoutFixed: function (ownerContext, width, suffix) {
|
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;
|
},
|
|
beginLayoutShrinkWrap: function (ownerContext) {
|
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', '');
|
},
|
|
finishedLayout: function(ownerContext){
|
var owner = this.owner;
|
|
this.callParent(arguments);
|
ownerContext.labelStrategy.finishedLayout(ownerContext, owner);
|
ownerContext.errorStrategy.finishedLayout(ownerContext, owner);
|
},
|
|
calculateOwnerHeightFromContentHeight: function(ownerContext, contentHeight) {
|
return contentHeight;
|
},
|
|
measureContentHeight: function (ownerContext) {
|
return ownerContext.el.getHeight();
|
},
|
|
measureContentWidth: function (ownerContext) {
|
return ownerContext.el.getWidth();
|
},
|
|
measureLabelErrorHeight: function (ownerContext) {
|
return ownerContext.labelStrategy.getHeight(ownerContext) +
|
ownerContext.errorStrategy.getHeight(ownerContext);
|
},
|
|
onFocus: function() {
|
this.getErrorStrategy().onFocus(this.owner);
|
},
|
|
/**
|
* 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;
|
},
|
|
/**
|
* 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;
|
},
|
|
/**
|
* 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,
|
|
/**
|
* 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),
|
|
/**
|
* Label displayed to the left of the bodyEl
|
*/
|
left: base,
|
|
/**
|
* Same as left, only difference is text-align in CSS
|
*/
|
right: base
|
};
|
}()),
|
|
/**
|
* 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,
|
|
/**
|
* 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),
|
|
/**
|
* 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),
|
|
/**
|
* 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),
|
|
/**
|
* 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),
|
|
/**
|
* 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: {
|
/**
|
* 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);
|
}
|
},
|
|
/**
|
* Destroy the error tip instance.
|
* @static
|
*/
|
destroyTip: function() {
|
var tip = this.tip;
|
if (tip) {
|
tip.destroy();
|
delete this.tip;
|
}
|
}
|
}
|
});
|
