Ext.define('Ext.form.field.Trigger', {
extend:'Ext.form.field.Text',
alias: ['widget.triggerfield', 'widget.trigger'],
requires: ['Ext.DomHelper', 'Ext.util.ClickRepeater', 'Ext.layout.component.field.Trigger'],
alternateClassName: ['Ext.form.TriggerField', 'Ext.form.TwinTriggerField', 'Ext.form.Trigger'],
childEls: [
{ name: 'triggerCell', select: '.' + Ext.baseCSSPrefix + 'trigger-cell' },
{ name: 'triggerEl', select: '.' + Ext.baseCSSPrefix + 'form-trigger' },
'triggerWrap',
'inputCell'
],
triggerBaseCls: Ext.baseCSSPrefix + 'form-trigger',
triggerWrapCls: Ext.baseCSSPrefix + 'form-trigger-wrap',
triggerNoEditCls: Ext.baseCSSPrefix + 'trigger-noedit',
hideTrigger: false,
editable: true,
readOnly: false,
repeatTriggerClick: false,
autoSize: Ext.emptyFn,
// private
monitorTab: true,
// private
mimicing: false,
// private
triggerIndexRe: /trigger-index-(\d+)/,
componentLayout: 'triggerfield',
initComponent: function() {
this.wrapFocusCls = this.triggerWrapCls + '-focus';
this.callParent(arguments);
},
getSubTplMarkup: function() {
var me = this,
field = me.callParent(arguments);
return '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap" cellpadding="0" cellspacing="0"><tbody><tr>' +
'<td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell">' + field + '</td>' +
me.getTriggerMarkup() +
'</tr></tbody></table>';
},
getSubTplData: function(){
var me = this,
data = me.callParent(),
readOnly = me.readOnly === true,
editable = me.editable !== false;
return Ext.apply(data, {
editableCls: (readOnly || !editable) ? ' ' + me.triggerNoEditCls : '',
readOnly: !editable || readOnly
});
},
getLabelableRenderData: function() {
var me = this,
triggerWrapCls = me.triggerWrapCls,
result = me.callParent(arguments);
return Ext.applyIf(result, {
triggerWrapCls: triggerWrapCls,
triggerMarkup: me.getTriggerMarkup()
});
},
getTriggerMarkup: function() {
var me = this,
i = 0,
hideTrigger = (me.readOnly || me.hideTrigger),
triggerCls,
triggerBaseCls = me.triggerBaseCls,
triggerConfigs = [];
if (!me.trigger1Cls) {
me.trigger1Cls = me.triggerCls;
}
for (i = 0; (triggerCls = me['trigger' + (i + 1) + 'Cls']) || i < 1; i++) {
triggerConfigs.push({
tag: 'td',
valign: 'top',
cls: Ext.baseCSSPrefix + 'trigger-cell',
style: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px'),
cn: {
cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
role: 'button'
}
});
}
triggerConfigs[i - 1].cn.cls += ' ' + triggerBaseCls + '-last';
return Ext.DomHelper.markup(triggerConfigs);
},
disableCheck: function() {
return !this.disabled;
},
beforeRender: function() {
var me = this,
triggerBaseCls = me.triggerBaseCls,
tempEl;
if (!me.triggerWidth) {
tempEl = Ext.resetElement.createChild({
style: 'position: absolute;',
cls: Ext.baseCSSPrefix + 'form-trigger'
});
Ext.form.field.Trigger.prototype.triggerWidth = tempEl.getWidth();
tempEl.remove();
}
me.callParent();
if (triggerBaseCls != Ext.baseCSSPrefix + 'form-trigger') {
me.addChildEls({ name: 'triggerEl', select: '.' + triggerBaseCls });
}
me.lastTriggerStateFlags = me.getTriggerStateFlags();
},
onRender: function() {
var me = this;
me.callParent(arguments);
me.doc = Ext.getDoc();
me.initTrigger();
me.triggerEl.unselectable();
},
getTriggerWidth: function() {
var me = this,
totalTriggerWidth = 0;
if (me.triggerWrap && !me.hideTrigger && !me.readOnly) {
totalTriggerWidth = me.triggerEl.getCount() * me.triggerWidth;
}
return totalTriggerWidth;
},
setHideTrigger: function(hideTrigger) {
if (hideTrigger != this.hideTrigger) {
this.hideTrigger = hideTrigger;
this.updateLayout();
}
},
setEditable: function(editable) {
if (editable != this.editable) {
this.editable = editable;
this.updateLayout();
}
},
setReadOnly: function(readOnly) {
if (readOnly != this.readOnly) {
this.readOnly = readOnly;
this.updateLayout();
}
},
initTrigger: function() {
var me = this,
triggerWrap = me.triggerWrap,
triggerEl = me.triggerEl,
disableCheck = me.disableCheck,
els, eLen, el, e, idx;
if (me.repeatTriggerClick) {
me.triggerRepeater = new Ext.util.ClickRepeater(triggerWrap, {
preventDefault: true,
handler: me.onTriggerWrapClick,
listeners: {
mouseup: me.onTriggerWrapMouseup,
scope: me
},
scope: me
});
} else {
me.mon(triggerWrap, {
click: me.onTriggerWrapClick,
mouseup: me.onTriggerWrapMouseup,
scope: me
});
}
triggerEl.setVisibilityMode(Ext.Element.DISPLAY);
triggerEl.addClsOnOver(me.triggerBaseCls + '-over', disableCheck, me);
els = triggerEl.elements;
eLen = els.length;
for (e = 0; e < eLen; e++) {
el = els[e];
idx = e+1;
el.addClsOnOver(me['trigger' + (idx) + 'Cls'] + '-over', disableCheck, me);
el.addClsOnClick(me['trigger' + (idx) + 'Cls'] + '-click', disableCheck, me);
}
triggerEl.addClsOnClick(me.triggerBaseCls + '-click', disableCheck, me);
},
onDestroy: function() {
var me = this;
Ext.destroyMembers(me, 'triggerRepeater', 'triggerWrap', 'triggerEl');
delete me.doc;
me.callParent();
},
onFocus: function() {
var me = this;
me.callParent(arguments);
if (!me.mimicing) {
me.bodyEl.addCls(me.wrapFocusCls);
me.mimicing = true;
me.mon(me.doc, 'mousedown', me.mimicBlur, me, {
delay: 10
});
if (me.monitorTab) {
me.on('specialkey', me.checkTab, me);
}
}
},
checkTab: function(me, e) {
if (!this.ignoreMonitorTab && e.getKey() == e.TAB) {
this.triggerBlur();
}
},
getTriggerStateFlags: function () {
var me = this,
state = 0;
if (me.readOnly) {
state += 1;
}
if (me.editable) {
state += 2;
}
if (me.hideTrigger) {
state += 4;
}
return state;
},
onBlur: Ext.emptyFn,
mimicBlur: function(e) {
if (!this.isDestroyed && !this.bodyEl.contains(e.target) && this.validateBlur(e)) {
this.triggerBlur(e);
}
},
triggerBlur: function(e) {
var me = this;
me.mimicing = false;
me.mun(me.doc, 'mousedown', me.mimicBlur, me);
if (me.monitorTab && me.inputEl) {
me.un('specialkey', me.checkTab, me);
}
Ext.form.field.Trigger.superclass.onBlur.call(me, e);
if (me.bodyEl) {
me.bodyEl.removeCls(me.wrapFocusCls);
}
},
validateBlur: function(e) {
return true;
},
onTriggerWrapClick: function() {
var me = this,
targetEl, match,
triggerClickMethod,
event;
event = arguments[me.triggerRepeater ? 1 : 0];
if (event && !me.readOnly && !me.disabled) {
targetEl = event.getTarget('.' + me.triggerBaseCls, null);
match = targetEl && targetEl.className.match(me.triggerIndexRe);
if (match) {
triggerClickMethod = me['onTrigger' + (parseInt(match[1], 10) + 1) + 'Click'] || me.onTriggerClick;
if (triggerClickMethod) {
triggerClickMethod.call(me, event);
}
}
}
},
onTriggerWrapMouseup: Ext.emptyFn,
onTriggerClick: Ext.emptyFn
});