Triggers

In Ext JS version 5, the Trigger field was deprecated, and now triggers are set inside text fields. So now, we can add one or many triggers to a single field.

In order to work with triggers, let's write the following code:

var myTriggers = Ext.create( 'Ext.form.field.Text' , {
  fieldLabel: 'My Field with triggers',
  triggers: {
    searchtext: {
      cls: 'x-form-search-trigger',
      handler: function() {
        Ext.Msg.alert('Alert', 'Trigger search was clicked');
        this.setValue('searching text...');
      }
    },
    cleartext: {
      cls: 'x-form-clear-trigger',
      handler: function() {
        Ext.Msg.alert('Alert', 'Trigger clear was clicked');
        this.setValue('');
      }
    }
  }
});
newItems.push( myTriggers );

First, we created an instance of the Ext.form.field.Text class, and set the triggers property, which will be a configuration object defining one or more triggers. In this case, we defined two: searchtext and cleartext. Each trigger has two properties...