Planning and coding of the clear button

To develop this plugin we will first create the clear button that will be rendered over the text component, and will apply the CSS styles according to the configuration options. After that, we need to add several event handlers for the clear button, such as click, mouseover, mouseout, mouseup, and mousedown, and also, several event handlers for the text component, such as destroy, resize, change, mouseover, and mouseout. Let us now start coding:

Ext.define('Examples.plugin.ClearButton', {
  alias : 'plugin.clearbutton',

  hideClearButtonWhenEmpty : true,
  hideClearButtonWhenMouseOut : true,
  animateClearButton : true,
  clearOnEscape : true,
  clearButtonCls : 'ext-ux-clearbutton',
  textField : null,
  animateWithCss3 : false,

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

    this.callParent(arguments);
  },

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