fit4dev - Plugins for ExtJ JS 4

ClearButton: Small clear button/icon over text field (text area, combo box, date field)

Demo

Move the mouse over any of these fields, click the cross icon to empty the text field.

Plugin: ClearButton.js, required CSS: ClearButton.css , button image: clear-text-icon.gif , example panel: ClearButtonDemoPanel.js

Usage

• Add the plugin file to your JavaScript sources: ClearButton.js
• Add the corresponding CSS file: ClearButton.css
• Add the plugin alias "clearbutton" to the "plugins" config option of the field:

{
    xtype: 'textfield',
    fieldLabel: 'Search',
    emptyText: 'Enter search term',
    plugins: ['clearbutton']
}

• The plugin understands these config options:
  • hideClearButtonWhenEmpty (Boolean) - Hide the clear button when the field is empty (default: true).
  • hideClearButtonWhenMouseOut (Boolean) - Hide the clear button until the mouse is over the field (default: true).
  • animateClearButton (Boolean) - When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
  • clearOnEscape - Empty the text field when ESC is pressed while the text field is focused (default: true).
  To use config options either instantiate the plugin (rather than passing only the alias):

  {
      xtype: 'textfield',
      fieldLabel: 'Search',
      emptyText: 'Enter search term',
      plugins: new Ext.ux.form.ClearButton({animateClearButton: false}),
      value: 'clear button w/o animation'
  }

  or change the plugin's option for all instances:

  Ext.override(Ext.ux.form.ClearButton, {hideClearButtonWhenEmpty: false});

Known issues

• This is only really a small issue if you configure the clear button to always show (instead of showing only on mouse over): The plugins tries to make room for the clear button by setting a padding-right on the input resp. textarea element. Unfortunately this has a few issues depending on the browser.
  • IE < 9: Form layout would be broken
  • IE 9: padding-right is ignored
  • FF: Works fine except for textarea where FF puts the padding in between the scrollbar and the outer border (duh)
  • Chrome/Safari: On textarea padding-right is ignored.
  In these cases the clear button will simply be shown over any text that may be under it.

Compatibility

Tested on

• FireFox: 3.6, 4
• Chrome: 11
• Safari: 5
• Opera: 11.10
• Internet Explorer: 6, 7, 8, 9

Blog

Brought to you by

Fabian Urban Stephen Friedrich