JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="//cdn.sencha.io/ext/gpl/4.2.0/resources/css/ext-all-neptune.css">

SCSS

.no-gradient {
    background-image: none !important;
}

JavaScript

/**

Because we don't define an alias here, even though this button has this.isXType('button') === true creating a button using declarative syntax and xtype: 'button' won't create an instance of this type.

*/
Ext.define('My.Button', {
    extend: 'Ext.button.Button',
    cls: 'no-gradient',
    style: 'background-color: orange'
});


/**

Because we *do* define an alias here, this button has this.isXType('button') === true and creating a button using declarative syntax and xtype: 'button' will create an instance of this type. The last Ext.define with a given alias wins.

*/
Ext.define('My.Other.Button', {
    extend: 'Ext.button.Button',
    alias: ['widget.button'],
    cls: 'no-gradient',
    style: 'background-color: green;'
});

Ext.create('widget.button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        boxready: function (btn) {
            var dh = {
                html: Ext.String.format('{0}: {1}', btn.$className, btn.getXTypes())
            };
            
            Ext.getBody().appendChild(dh);
        }
    }
});