Ext.ux.form.trigger.Clear/Clear.js at master · ralscha/Ext.ux.form.trigger.Clear · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/**
 * @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>.
 */
Ext.define('Ext.ux.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: false).
	 */
	hideWhenMouseOut: false,

	/**
	 * @cfg {Boolean} Clears the textfield/combobox when the escape (ESC) key is pressed
	 */
	clearOnEscape: false,

	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() {
				this.mouseover = true;
				this.updateTriggerVisibility();
			}, this);

			this.addManagedListener(bodyEl, 'mouseout', function() {
				this.mouseover = false;
				this.updateTriggerVisibility();
			}, this);
		}

		if (this.clearOnEscape) {
			this.addManagedListener(cmp.inputEl, 'keydown', function(e) {
				if (e.getKey() === Ext.event.Event.ESC) {
					if (cmp.isExpanded) {
						return;
					}
					this.handler(cmp);
					e.stopEvent();
				}
			}, this);
		}
	},

	updateTriggerVisibility: function() {
		if (this.isTriggerVisible()) {
			if (!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;
		}

		return true;
	}

});