JSFiddle - React, Tailwind, and code Playground

by vero4ka

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.0.0/ext-all-debug.js"></script>
<div id="container"></div>

CSS

html, body {
            border: 0;
        }
sup { 
    vertical-align: top; 
    font-size: 0.7em; 
}

JavaScript

Ext.onReady(function(){
    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: 'container',
        title: 'Search the Ext Forums',
        width: 300,
        bodyPadding: 10,
        layout: 'anchor',
        
        items: [{
            xtype: 'combo',
            store: new Ext.data.SimpleStore({
                data: [
                    [1, 'Position<sup>1</sup>'],
                    [2, 'Position<sup>2</sup>']
                ],
                id: 0,
                fields: ['value', 'title']
            }),
            displayField: 'text',
            typeAhead: false,
            hideLabel: true,
            anchor: '100%',
            
            displayTpl: Ext.create('Ext.XTemplate', [ 
                '<tpl for=".">',
                '{[typeof values === "string" ? values : values["title"]]}',
                '</tpl>'
            ]),
            
            fieldSubTpl: [
                '<div class="{hiddenDataCls}" role="presentation"></div>',
                '<div id="{id}" type="{type}" ',
                    '<tpl if="size">size="{size}" </tpl>',
                    '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
                    'class="{fieldCls} {typeCls}" autocomplete="off"></div>',
                '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">',
                    '{triggerEl}',
                    '<div class="{clearCls}" role="presentation"></div>',
                '</div>',
                {
                    compiled: true,
                    disableFormats: true
                }
            ],
            
            pageSize: 10,
            
            setRawValue: function(value) {
                var me = this;
                value = Ext.value(value, '');
                me.rawValue = value;
        
                // Some Field subclasses may not render an inputEl
                if (me.inputEl) {
                    me.inputEl.dom.innerHTML = value;
                }
   ...