Ext.ux.form.field.ClearButton - Small clear button/icon over field

[stephen.friedrich]

A plugin for text fields (as well as date fields, combo boxes and text areas) that shows a small "clear button" in the text field when the mouse is over the field.

Demo and download page

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!

[morfeusz]

very good, thanks

[johnleroux]

Very very good plugins. Thanks!!!!

[Remy]

Very nice and elegant.

[ZeusTheTrueGod]

Cute, but pretty useless plugin imlementation from a usability point of view.

The 'X' button should be always visible else it is hard to use it.

[gustavo21]

How could add a store reload when i clear a textfield? I wanna use it for filters, and when i clear a textfield the store is reload...

Thanks.

[kveeiv]

The 'X' button should be always visible else it is hard to use it.

Please see the documentation the author has included. This option is available through the configuration options "hideClearButtonWhenEmpty" and "hideClearButtonWhenMouseOut". Setting both to false should give you the functionality you desire.

Feedback welcome!

This is great. It is nice to be able to throw this plugin on to any textfield based input and be able to have a consistent means of clearing the field's value.

A few small notes:
* Your CSS references a custom image for the clear button (in a relative parent path), but this image is not linked to from the download page. I would move the image in to the same folder (or a subfolder instead of a parent), and compress the 3 files in to an archive that can be easily downloaded.

* Some fields might be rendered already by the time this plugin is activated (like when existing input fields are being transformed to extjs fields), which causes this plugin not to register properly. This can be overcome with a simple fix to init(). Additionally, handleAfterRender does not need the parameter it has listed, since the textfield is referenced off of 'this'.

init: function(textField) {
  this.textField = textField;
  if (!textField.rendered) {
    textField.on('afterrender', this.handleAfterRender, this);
  } else {
    this.handleAfterRender();
  }
},

* In an effort to get this compatible with the next version of the BoxSelect component, I modified the calculation of the clear button positioning to be "right" based instead of "left". I believe that this change improves positioning for all fields for both always-on and hover-on cases, using the examples/form/combos.html and examples/form/field-types.html pages for testing. Textareas still suffer from text overlap, but overall they seem to behave better and more consistently between browsers.

/**
        * Repositions the clear button element based on the textfield.inputEl element
        * @private
        */
       repositionClearButton: function() {
           var clearButtonEl = this.clearButtonEl;
           if (!clearButtonEl) {
               return;
           }
           var clearButtonPosition = this.calculateClearButtonPosition(this.textField);
           clearButtonEl.dom.style.right = clearButtonPosition.right + 'px';
           clearButtonEl.dom.style.top = clearButtonPosition.top + 'px';
       },

       /**
        * Calculates the position of the clear button based on the textfield.inputEl element
        * @private
        */
       calculateClearButtonPosition: function(textField) {
           var positions = textField.inputEl.getBox(true, true);
           var top = positions.y;
		   var right = positions.x;
           if(this.fieldHasScrollBar()) {
               right += Ext.getScrollBarWidth();
           }
		   if(this.textField.triggerWrap) {
			   right += this.textField.getTriggerWidth();
		   }
           return {
               right: right,
               top: top
           };
       },

This plugin is cleanly implemented in a way that made these changes easy to make, and works as expected across all textfield-based classes, well done!

[stephen.friedrich]

Cute, but pretty useless plugin imlementation from a usability point of view.

The 'X' button should be always visible else it is hard to use it.

Have a close look at the docs. Your requirement is already exactly documented:
Ext.override(Ext.ux.form.ClearButton, {hideClearButtonWhenEmpty: false});
IMHO it depends on your specific use case. If you want to have the clear button at a lot of text fields, then I think its better to have it only on mouse over because else it would clutter the UI too much.

[lorezyra]

A plugin for text fields (as well as date fields, combo boxes and text areas) that shows a small "clear button" in the text field when the mouse is over the field.

Demo and download page

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...

.ext-ux-clearbutton {
    width: 16px;
    height: 16px;
    /* background-image: url(clear-text-icon.gif); */ /* 12 x 12 "X" */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGASURBVDiNrZOxThthEIRn9ipegCgVHQVyEclxzi34rIODFwiVS3fELQ9AS9JRuuIJiHMnn1tky1iisCjSpQHZL+DKOyngpLNFkKww9c7+8+3+S0koKzoOdwO3UyeqlKoAIHJiwmRpfp3/HP0u17NoQJLRUXhG4QLAFl7XQsR5/mv0Qy9GSgJJNg/DGwDJP4zr6vXT0YkkGQBER+HZBmYASF48YCP5smvO+1LsPy5rm3kXwodnPszcrWX0KwA7BY6bPlngdlpmdlk7T29TBw4AzAHMHTjI09vUZe1Sii06vpoT1XI2M+9GSX0v7w0f6MsGfdnIe8OHKKnvmXl3BYT2mc3D8BHAxzXGOX3ZyLLxFADiuFaRBQMA22t1T7bB4F6ViZysxsLMif0sG0/juFaJ41oly8ZTJ/ZBzMqlIidmwkoDd2sVzLJgIAsGxUzcrbXymPzuv9dISWgm9W8ULjdhF9Hp94bf3+crS1I/HZ2I6ABYvGFciOgUZqB0jYU2Pee/yjnfEUKuaMMAAAAASUVORK5CYII=');
    background-position: 0 0;
    background-repeat: no-repeat;
    -moz-user-focus: ignore; /* https://developer.mozilla.org/en/CSS/-moz-user-focus */
    cursor: pointer;
    position: absolute;
    overflow:  hidden; /* IE 6 :-( */
    margin: 0px;
    background-color: white;
}

.ext-ux-clearbutton-mouse-over-input {
   /* background-position: 0 -12px; */
}

.ext-ux-clearbutton-mouse-over-button {
   /* background-position: 0 -24px; */
}

.ext-ux-clearbutton-mouse-down {
   /* background-position: 0 -36px; */
}

.ext-ux-clearbutton-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s linear;
    -webkit-transition: opacity .35s linear;
    -moz-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    -ms-transition: opacity .35s linear;
    -khtml-transition: opacity .35s linear;
}

.ext-ux-clearbutton-off {
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s linear, visibility .0s linear .35s;
    -webkit-transition: opacity .35s linear, visibility .0s linear .35s;
    -moz-transition: opacity .35s linear, visibility .0s linear .35s;
    -o-transition: opacity .35s linear, visibility .0s linear .35s;
    -ms-transition: opacity .35s linear, visibility .0s linear .35s;
    -khtml-transition: opacity .35s linear, visibility .0s linear .35s;
}

This makes it nicer to use in Sencha Architect.