Ext.define('Ext.form.field.Base', {
extend: 'Ext.Component',
mixins: {
labelable: 'Ext.form.Labelable',
field: 'Ext.form.field.Field'
},
alias: 'widget.field',
alternateClassName: ['Ext.form.Field', 'Ext.form.BaseField'],
requires: ['Ext.util.DelayedTask', 'Ext.XTemplate', 'Ext.layout.component.field.Field'],
fieldSubTpl: [
'<input id="{id}" type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>',
{
disableFormats: true
}
],
subTplInsertions: [
'inputAttrTpl'
],
inputType: 'text',
invalidText : 'The value in this field is invalid',
fieldCls : Ext.baseCSSPrefix + 'form-field',
focusCls : 'form-focus',
dirtyCls : Ext.baseCSSPrefix + 'form-dirty',
checkChangeEvents: Ext.isIE && (!document.documentMode || document.documentMode < 9) ?
['change', 'propertychange'] :
['change', 'input', 'textInput', 'keyup', 'dragdrop'],
checkChangeBuffer: 50,
componentLayout: 'field',
readOnly : false,
readOnlyCls: Ext.baseCSSPrefix + 'form-readonly',
validateOnBlur: true,
hasFocus : false,
baseCls: Ext.baseCSSPrefix + 'field',
maskOnDisable: false,
initComponent : function() {
var me = this;
me.callParent();
me.subTplData = me.subTplData || {};
me.addEvents(
'specialkey',
'writeablechange'
);
me.initLabelable();
me.initField();
if (!me.name) {
me.name = me.getInputId();
}
},
beforeRender: function(){
var me = this;
me.callParent(arguments);
me.beforeLabelableRender(arguments);
if (me.readOnly) {
me.addCls(me.readOnlyCls);
}
},
getInputId: function() {
return this.inputId || (this.inputId = this.id + '-inputEl');
},
getSubTplData: function() {
var me = this,
type = me.inputType,
inputId = me.getInputId(),
data;
data = Ext.apply({
id : inputId,
cmpId : me.id,
name : me.name || inputId,
disabled : me.disabled,
readOnly : me.readOnly,
value : me.getRawValue(),
type : type,
fieldCls : me.fieldCls,
fieldStyle : me.getFieldStyle(),
tabIdx : me.tabIndex,
typeCls : Ext.baseCSSPrefix + 'form-' + (type === 'password' ? 'text' : type)
}, me.subTplData);
me.getInsertionRenderData(data, me.subTplInsertions);
return data;
},
afterFirstLayout: function() {
this.callParent();
var el = this.inputEl;
if (el) {
el.selectable();
}
},
applyRenderSelectors: function() {
var me = this;
me.callParent();
me.inputEl = me.el.getById(me.getInputId());
},
getSubTplMarkup: function() {
return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
},
initRenderTpl: function() {
var me = this;
if (!me.hasOwnProperty('renderTpl')) {
me.renderTpl = me.getTpl('labelableRenderTpl');
}
return me.callParent();
},
initRenderData: function() {
return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
},
setFieldStyle: function(style) {
var me = this,
inputEl = me.inputEl;
if (inputEl) {
inputEl.applyStyles(style);
}
me.fieldStyle = style;
},
getFieldStyle: function() {
return 'width:100%;' + (Ext.isObject(this.fieldStyle) ? Ext.DomHelper.generateStyles(this.fieldStyle) : this.fieldStyle ||'');
},
onRender : function() {
var me = this;
me.callParent(arguments);
me.onLabelableRender();
me.renderActiveError();
},
getFocusEl: function() {
return this.inputEl;
},
isFileUpload: function() {
return this.inputType === 'file';
},
extractFileInput: function() {
var me = this,
fileInput = me.isFileUpload() ? me.inputEl.dom : null,
clone;
if (fileInput) {
clone = fileInput.cloneNode(true);
fileInput.parentNode.replaceChild(clone, fileInput);
me.inputEl = Ext.get(clone);
}
return fileInput;
},
getSubmitData: function() {
var me = this,
data = null,
val;
if (!me.disabled && me.submitValue && !me.isFileUpload()) {
val = me.getSubmitValue();
if (val !== null) {
data = {};
data[me.getName()] = val;
}
}
return data;
},
getSubmitValue: function() {
return this.processRawValue(this.getRawValue());
},
getRawValue: function() {
var me = this,
v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
me.rawValue = v;
return v;
},
setRawValue: function(value) {
var me = this;
value = Ext.value(me.transformRawValue(value), '');
me.rawValue = value;
if (me.inputEl) {
me.inputEl.dom.value = value;
}
return value;
},
transformRawValue: function(value) {
return value;
},
valueToRaw: function(value) {
return '' + Ext.value(value, '');
},
rawToValue: function(rawValue) {
return rawValue;
},
processRawValue: function(value) {
return value;
},
getValue: function() {
var me = this,
val = me.rawToValue(me.processRawValue(me.getRawValue()));
me.value = val;
return val;
},
setValue: function(value) {
var me = this;
me.setRawValue(me.valueToRaw(value));
return me.mixins.field.setValue.call(me, value);
},
onBoxReady: function() {
var me = this;
me.callParent();
if (me.setReadOnlyOnBoxReady) {
me.setReadOnly(me.readOnly);
}
},
onDisable: function() {
var me = this,
inputEl = me.inputEl;
me.callParent();
if (inputEl) {
inputEl.dom.disabled = true;
if (me.hasActiveError()) {
me.clearInvalid();
me.needsValidateOnEnable = true;
}
}
},
onEnable: function() {
var me = this,
inputEl = me.inputEl;
me.callParent();
if (inputEl) {
inputEl.dom.disabled = false;
if (me.needsValidateOnEnable) {
delete me.needsValidateOnEnable;
me.forceValidation = true;
me.isValid();
delete me.forceValidation;
}
}
},
setReadOnly: function(readOnly) {
var me = this,
inputEl = me.inputEl;
readOnly = !!readOnly;
me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls);
me.readOnly = readOnly;
if (inputEl) {
inputEl.dom.readOnly = readOnly;
} else if (me.rendering) {
me.setReadOnlyOnBoxReady = true;
}
me.fireEvent('writeablechange', me, readOnly);
},
fireKey: function(e){
if(e.isSpecialKey()){
this.fireEvent('specialkey', this, new Ext.EventObjectImpl(e));
}
},
initEvents : function(){
var me = this,
inputEl = me.inputEl,
onChangeTask,
onChangeEvent,
events = me.checkChangeEvents,
e,
eLen = events.length,
event;
if (me.inEditor) {
me.onBlur = Ext.Function.createBuffered(me.onBlur, 10);
}
if (inputEl) {
me.mon(inputEl, Ext.EventManager.getKeyEvent(), me.fireKey, me);
onChangeTask = new Ext.util.DelayedTask(me.checkChange, me);
me.onChangeEvent = onChangeEvent = function() {
onChangeTask.delay(me.checkChangeBuffer);
};
for (e = 0; e < eLen; e++) {
event = events[e];
if (event === 'propertychange') {
me.usesPropertychange = true;
}
me.mon(inputEl, event, onChangeEvent);
}
}
me.callParent();
},
doComponentLayout: function() {
var me = this,
inputEl = me.inputEl,
usesPropertychange = me.usesPropertychange,
ename = 'propertychange',
onChangeEvent = me.onChangeEvent;
if (usesPropertychange) {
me.mun(inputEl, ename, onChangeEvent);
}
me.callParent(arguments);
if (usesPropertychange) {
me.mon(inputEl, ename, onChangeEvent);
}
},
onDirtyChange: function(isDirty) {
this[isDirty ? 'addCls' : 'removeCls'](this.dirtyCls);
},
isValid : function() {
var me = this,
disabled = me.disabled,
validate = me.forceValidation || !disabled;
return validate ? me.validateValue(me.processRawValue(me.getRawValue())) : disabled;
},
validateValue: function(value) {
var me = this,
errors = me.getErrors(value),
isValid = Ext.isEmpty(errors);
if (!me.preventMark) {
if (isValid) {
me.clearInvalid();
} else {
me.markInvalid(errors);
}
}
return isValid;
},
markInvalid : function(errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
},
clearInvalid : function() {
var me = this,
hadError = me.hasActiveError();
me.unsetActiveError();
if (hadError) {
me.updateLayout();
}
},
renderActiveError: function() {
var me = this,
hasError = me.hasActiveError();
if (me.inputEl) {
me.inputEl[hasError ? 'addCls' : 'removeCls'](me.invalidCls + '-field');
}
me.mixins.labelable.renderActiveError.call(me);
},
getActionEl: function() {
return this.inputEl || this.el;
}
});