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">

JavaScript

var items = [];

Ext.define('My.Checkbox', {
    extend: 'Ext.form.field.Checkbox',
    alias: 'widget.mycheckbox'
});

Ext.widget({
    id: 'c-0',
    xtype: 'checkbox',
    renderTo: Ext.getBody(),
    name: 'check',
    value: 1,
    fieldLabel: 'Yes'
});

Ext.widget({
    id: 'c-1',
    xtype: 'mycheckbox',
    renderTo: Ext.getBody(),
    name: 'check',
    value: 0,
    fieldLabel: 'No'
});

[Ext.getCmp('c-0'), Ext.getCmp('c-1')].forEach(function (cmp) {
    [cmp.xtype, cmp.isXType('checkbox'), cmp.isXType('checkbox', true)].forEach(function (html) {
        items.push({
            xtype: 'component',
            html: '' + html
        });
    });
});

Ext.widget({
    xtype: 'container',
    items: items,
    renderTo: Ext.getBody()    
});