/**
* Layout class for {@link Ext.form.field.Trigger} fields. Adjusts the input field size to accommodate
* the trigger button(s).
* @private
*/
Ext.define('Ext.layout.component.field.Trigger', {
/* Begin Definitions */
alias: 'layout.triggerfield',
extend: 'Ext.layout.component.field.Field',
/* End Definitions */
type: 'triggerfield',
beginLayout: function(ownerContext) {
var me = this,
owner = me.owner,
flags;
ownerContext.triggerWrap = ownerContext.getEl('triggerWrap');
me.callParent(arguments);
// if any of these important states have changed, sync them now:
flags = owner.getTriggerStateFlags();
if (flags != owner.lastTriggerStateFlags) {
owner.lastTriggerStateFlags = flags;
me.updateEditState();
}
},
beginLayoutFixed: function (ownerContext, width, suffix) {
var me = this,
owner = ownerContext.target,
ieInputWidthAdjustment = me.ieInputWidthAdjustment,
inputWidth = '100%';
me.callParent(arguments);
owner.inputCell.setStyle('width', '100%');
if(ieInputWidthAdjustment) {
// adjust for IE 6/7 strict content-box model
// RTL: This might have to be padding-left unless the senses of the padding styles switch when in RTL mode.
owner.inputCell.setStyle('padding-right', ieInputWidthAdjustment + 'px');
if(suffix === 'px') {
inputWidth = width - ieInputWidthAdjustment - owner.getTriggerWidth();
}
}
owner.inputEl.setStyle('width', inputWidth);
owner.triggerWrap.setStyle('width', width + suffix);
owner.triggerWrap.setStyle('table-layout', 'fixed');
},
beginLayoutShrinkWrap: function (ownerContext) {
var owner = ownerContext.target,
emptyString = '';
this.callParent(arguments);
owner.triggerWrap.setStyle('width', emptyString);
owner.inputCell.setStyle('width', emptyString);
owner.inputEl.setStyle('width', emptyString);
owner.triggerWrap.setStyle('table-layout', 'auto');
},
getTextWidth: function () {
var me = this,
owner = me.owner,
inputEl = owner.inputEl,
value;
// Find the width that contains the whole text value
value = (inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '') + owner.growAppend;
return inputEl.getTextWidth(value);
},
measureContentWidth: function (ownerContext) {
var me = this,
owner = me.owner,
width = me.callParent(arguments),
inputContext = ownerContext.inputContext,
calcWidth, max, min;
if (owner.grow && !ownerContext.state.growHandled) {
calcWidth = me.getTextWidth() + ownerContext.inputContext.getFrameInfo().width;
max = owner.growMax;
min = Math.min(max, width);
max = Math.max(owner.growMin, max, min);
// Constrain
calcWidth = Ext.Number.constrain(calcWidth, owner.growMin, max);
inputContext.setWidth(calcWidth);
ownerContext.state.growHandled = true;
// Now that we've set the inputContext, we need to recalculate the width
inputContext.domBlock(me, 'width');
width = NaN;
}
return width;
},
updateEditState: function() {
var me = this,
owner = me.owner,
inputEl = owner.inputEl,
noeditCls = Ext.baseCSSPrefix + 'trigger-noedit',
displayed,
readOnly;
if (me.owner.readOnly) {
inputEl.addCls(noeditCls);
readOnly = true;
displayed = false;
} else {
if (me.owner.editable) {
inputEl.removeCls(noeditCls);
readOnly = false;
} else {
inputEl.addCls(noeditCls);
readOnly = true;
}
displayed = !me.owner.hideTrigger;
}
owner.triggerCell.setDisplayed(displayed);
inputEl.dom.readOnly = readOnly;
}
});