/**
* @cfg {Boolean} Hide the clear button until the mouse is over the field (default: true).
*/
hideClearButtonWhenMouseOut: true,

/**
* @cfg {Boolean} When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
*/
animateClearButton: true,

/**
* @cfg {Boolean} Empty the text field when ESC is pressed while the text field is focused.
*/
clearOnEscape: true,

/**
* @cfg {String} CSS class used for the button div.
* Also used as a prefix for other classes (suffixes: '-mouse-over-input', '-mouse-over-button', '-mouse-down', '-on', '-off')
*/
clearButtonCls: 'ext-ux-clearbutton',

/**
* The text field (or text area, combo box, date field) that we are attached to
*/
textField: null,

/**
* Will be set to true if animateClearButton is true and the browser supports CSS 3 transitions
* @private
*/
animateWithCss3: false,

/////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Set up and tear down
//
/////////////////////////////////////////////////////////////////////////////////////////////////////

constructor: function(cfg) {
Ext.apply(this, cfg);

this.callParent(arguments);
},

/**
* Called by plug-in system to initialize the plugin for a specific text field (or text area, combo box, date field).
* Most all the setup is delayed until the component is rendered.
*/
init: function(textField) {

/**
* If config option "clearOnEscape" is true, then add a key listener that will clear this field
*/
addEscListener: function() {
if (!this.clearOnEscape) {
return;
}

// Using a KeyMap did not work: ESC is swallowed by combo box and date field before it reaches our own KeyMap
this.textField.inputEl.on('keydown',
function(e) {
if (e.getKey() == Ext.EventObject.ESC) {
if (this.textField.isExpanded) {
// Let combo box or date field first remove the popup
return;
}
// No idea why the defer is necessary, but otherwise the call to setValue('') is ignored
Ext.Function.defer(this.textField.setValue, 1, this.textField, ['']);
e.stopEvent();
}
},
this);
},

/**
* Small wrapper around clearButtonEl.isVisible() to handle setVisible animation that may still be in progress.
*/
isButtonCurrentlyVisible: function() {
if (this.animateClearButton && this.animateWithCss3) {
return this.clearButtonEl.hasCls(this.clearButtonCls + '-on');
}

// This should not be necessary (see Element.setVisible/isVisible), but else there is confusion about visibility
// when moving the mouse out and _quickly_ over then input again.
var cachedVisible = Ext.core.Element.data(this.clearButtonEl.dom, 'isVisible');
if (typeof(cachedVisible) == 'boolean') {
return cachedVisible;
}
return this.clearButtonEl.isVisible();
},

// Set background-color of clearButton to same as field's background-color (for those browsers/cases
// where the padding-right (see below) does not work)
clearButtonEl.setStyle('background-color', this.textField.inputEl.getStyle('background-color'));

I am not able to use your plugin in my code. Can you please give some editor link where i can see you running code , like Jsfiddle. I want to know where i am using your code wrongly. I am new to extjs please help.
Thanks,
Vyom

ExtJS 4.2

ExtJS 4.2

Does anybody run this great plugin with ExtJs 4.2.?
I think the structure of the fields has changed in this version and therefore the small cross does'nt show at the proper position.
Could anybody help?

Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

When in doubt, check the d4mn source code!
================================================
And here are my terms...

I don't care if you use my source code. (Known as "Code.")

I don't care if I get any monetary compensation.

I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.

Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.

By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.

You are welcome to change and improve the Code to best meet your needs.

I don't care if you use the Code in a commercial or open-source project.

This is a small feature, but initially I had totally under-estimated the effort to implement it.
Well, I have probably over-engineered the solution a little what with the animation option to fade in/out the icon and other config options ;-)

Feedback welcome!

I prefer the embedded image instead of a GIF sprite.
[thanks to apastakia for the CSS]

Here's my CSS that works well for the EXTJS 4.1 version of this plugin...

Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

When in doubt, check the d4mn source code!
================================================
And here are my terms...

I don't care if you use my source code. (Known as "Code.")

I don't care if I get any monetary compensation.

I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.

Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.

By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.

You are welcome to change and improve the Code to best meet your needs.

I don't care if you use the Code in a commercial or open-source project.

Your override works okay... But it fails to position the clear button correctly when the label is above the base field or when the parent container is wider than the actual field... Also, when you have components with similar itemId strings (e.g. "Password" and "Password0") it attaches the clearButton to the first match instead of the exact match.

I'll see if I can find a fix for these.. Otherwise this works well enough for ExtJS 4.1.3.

Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

When in doubt, check the d4mn source code!
================================================
And here are my terms...

I don't care if you use my source code. (Known as "Code.")

I don't care if I get any monetary compensation.

I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.

Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.

By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.

You are welcome to change and improve the Code to best meet your needs.

I don't care if you use the Code in a commercial or open-source project.