JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
    Ext.define('Ext.ux.CustomTrigger', {
        extend: 'Ext.form.field.Trigger',
        alias: 'widget.customtrigger',
        labelStyle: 'white-space: nowrap',
        initComponent : function() {
            this.on("focus", function() {
                console.log("Trigger focused");
            });
            this.on("blur", function() {
                console.log("Trigger blurred");
            });
            this.callParent();
        }
        
    });
    
    Ext.create('Ext.form.FormPanel', {
        extend: 'panel',
        fieldType: 'panel',
        layout: {
            type: 'absolute'
        },
        title: 'DEMOGRAPHICS',
        bodyPadding: 5,
        width: 600,
        height : 400,
        renderTo: Ext.getBody(),
        items:[
             {
                enforceMaxLength: true,
                fieldLabel: 'First Name',
                x: 10,
                y : 10,
                xtype: 'textfield'
            },
            {
                xtype: 'customtrigger',
                fieldLabel: 'Sample Trigger',
                emptyText: 'click the trigger',
                x: 100,
                y : 50
            },
            {
                x: 200,
                y : 150,
                enforceMaxLength: true,
                fieldLabel: 'Mid Init',
                xtype: 'textfield'
            }
        ]
    });
});