JSFiddle - React, Tailwind, and code Playground

by sran

HTML

<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all.js"></script>
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
    Ext.define('Ext.ux.form.field.ClearCombo', {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.clearcombo',
        
        trigger2Cls: 'x-form-clear-trigger',
    
        initComponent: function () {
            var me = this;
    
    
            me.addEvents(
                /**
                * @event beforeclear
                *
                * @param {<|#NAMESPACE#|>.FilterCombo} FilterCombo The filtercombo that triggered the event
                */
                'beforeclear',
                /**
                * @event beforeclear
                *
                * @param {<|#NAMESPACE#|>.FilterCombo} FilterCombo The filtercombo that triggered the event
                */
                'clear'
            );
    
            me.callParent(arguments);
    
            me.on('specialkey', this.onSpecialKeyDown, me);
            me.on('select', function (me, rec) {
                me.onShowClearTrigger(true); 
            }, me);
            me.on('afterrender', function () { me.onShowClearTrigger(false); }, me);
        },
    
        /**
        * @private onSpecialKeyDown
        * eventhandler for special keys
        */
        onSpecialKeyDown: function (obj, e, opt) {
            if ( e.getKey() == e.ESC )
            {
                this.clear();
            }
        },
    
        onShowClearTrigger: function (show) {
            var me = this;

            show = ( Ext.isBoolean( show ) ) ? show : false;
            if (show) {
                me.triggerEl.each(function (el, c, i) {
                    if (i === 1) {
                        el.setWidth(el.originWidth, false);
                        el.setVisible(true);
                        me.active = true;
                    }
                });
            } else {
                me.triggerEl.each(function (el, c, i) {
                    if (i === 1) {
                        el.originWidth = el.getWidth();
                 ...