【ExtJS】输入框Clear按钮

修改官方版本，增加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:[email protected]">Stephen Friedrich</a>
 * @author <a href="mailto:[email protected]">Fabian Urban</a>
 * @author <a href="https://github.com/aghuddleston">aghuddleston</a>
 * @author <a href="mailto:[email protected]">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;
			}

		});