修改官方版本,增加ctrl控制。
/**
* @class Ext.ux.form.trigger.Clear
*
* Trigger for textfields and comboboxes that adds a clear icon to the field.
* When this icon is clicked the value of the field is cleared.
*
* @author <a href="mailto:stephen.friedrich@fortis-it.de">Stephen Friedrich</a>
* @author <a href="mailto:fabian.urban@fortis-it.de">Fabian Urban</a>
* @author <a href="https://github.com/aghuddleston">aghuddleston</a>
* @author <a href="mailto:p.maechler@iwf.ch">Pat M?chler</a>
* @author <a href="https://github.com/ralscha">Ralph Schaer</a>
*
* @license Ext.ux.form.trigger.Clear is released under the <a target="_blank"
* href="http://www.apache.org/licenses/LICENSE-2.0.txt">Apache
* License, Version 2.0</a>.
* @fix by zzf
* 1)按ctrl键才显示清除按钮
* 2)enable为false则不显示清除按钮
*/
Ext.define('My.widget.form.trigger.Clear', {
extend : 'Ext.form.trigger.Trigger',
alias : 'trigger.clear',
cls : Ext.baseCSSPrefix + 'form-clear-trigger',
mixins : {
observable : 'Ext.util.Observable'
},
/**
* @cfg {Boolean} Hides the clear trigger when the field is empty
* (has no value) (default: true).
*/
hideWhenEmpty : true,
/**
* @cfg {Boolean} Hides the clear trigger until the mouse hovers
* over the field (default: true).
*/
hideWhenMouseOut : true,
/**
* @cfg {Boolean} Clears the textfield/combobox when the escape
* (ESC) key is pressed
*/
clearOnEscape : false,
/**
* zzf 增加ctrl键
*/
clearWithCtrl : true,
destroy : function() {
this.clearListeners();
this.callParent();
},
initEvents : function() {
this.updateTriggerVisibility();
this.callParent();
var cmp = this.field;
if (this.hideWhenEmpty) {
this.addManagedListener(cmp, 'change',
this.updateTriggerVisibility, this);
}
if (this.hideWhenMouseOut) {
var bodyEl = cmp.bodyEl;
this.addManagedListener(bodyEl, 'mouseover', function(e) {
// ctrl状态
this.ctrlDown = e.ctrlKey;
this.mouseover = true;
this.updateTriggerVisibility();
}, this);
this.addManagedListener(bodyEl, 'mouseout', function() {
this.mouseover = false;
this.updateTriggerVisibility();
}, this);
}
if (this.clearOnEscape || this.clearWithCtrl) {
this.addManagedListener(cmp.inputEl, 'keydown',
function(e) {
if (this.clearOnEscape
&& e.getKey() === Ext.event.Event.ESC) {
if (cmp.isExpanded) {
return;
}
this.handler(cmp);
e.stopEvent();
} else if (this.clearWithCtrl) {
// 增加ctrl按下的状态监测
if (e.getKey() === Ext.event.Event.CTRL) {
this.ctrlDown = true;
this.updateTriggerVisibility()
e.stopEvent();
}
}
}, this);
if (this.clearWithCtrl) {
this.addManagedListener(cmp.inputEl, 'keyup', function(
e) {
if (e.getKey() === Ext.event.Event.CTRL) {
this.ctrlDown = false;
this.updateTriggerVisibility()
e.stopEvent();
}
}, this);
}
}
},
updateTriggerVisibility : function() {
if (this.isTriggerVisible()) {
// fixed by zzf:增加enable判断
// if (!this.isVisible()) {
if (this.isFieldEnabled() && !this.isVisible()) {
this.show();
}
} else {
if (this.isVisible()) {
this.hide();
}
}
},
handler : function(cmp) {
if (Ext.isFunction(cmp.clearValue)) {
cmp.clearValue();
} else {
cmp.setValue('');
}
},
isTriggerVisible : function() {
if (!this.field || !this.rendered || this.isDestroyed) {
return false;
}
if (this.hideWhenEmpty && Ext.isEmpty(this.field.getValue())) {
return false;
}
if (this.hideWhenMouseOut && !this.mouseover) {
return false;
}
// add by zzf
if (this.clearWithCtrl && !this.ctrlDown) {
return false;
}
return true;
}
});