JSFiddle - React, Tailwind, and code Playground

by vinayaknb

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

Ext.require([
    'Ext.form.*',
    'Ext.tip.*'
]);

Ext.onReady(function() {
    
    var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"<new Item>"},
        {"abbr":"AZ", "name":'<a href="http://google.com">test</a>'},
        {"abbr":"AZ", "name":'&lt;A HREF="HTTP://GOOGLE.COM"&gt;TEST&lt;/A&gt;'}
        //...
    ]
});


// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State with issue',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State with out issue',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    listConfig: {
            getInnerTpl: function(){
                return '{name:htmlEncode}';
            }
        }
});



var name = Ext.create('Ext.form.field.Display', {
    xtype: 'displayfield',
    id: 'program_name',
    renderTo: Ext.getBody(),
    fieldLabel: 'Name',
    labelWidth: '250px',
    width: 450,
    height: 20,
    store: states,
    name: 'abbr'
});


Ext.create('Ext.panel.Panel', {
    //extend: 'Ext.Panel',
    alias: 'widget.buildingInfo',
    xtype: 'buildingInfo',
    layout: 'form',
    resizable: true,
    border: 'fit',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'fieldset',
            title: 'TEST',
            items: [{
                xtype: 'displayfield',
                name: 'abbr',
                fieldLabel: 'abbr'
            }, {
                xtype: 'displayfield',
                name: 'name',
                fieldLabel: 'name'
            }]
        }]
    }],
   ...