JSFiddle - React, Tailwind, and code Playground

by amitaviv99

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'http://cdn.sencha.com/ext-4.2.0-gpl/examples/ux/');

Ext.require([
     'Ext.ux.ajax.JsonSimlet',
    'Ext.ux.ajax.SimManager'
]);
Ext.onReady(function () {
    Ext.ux.ajax.SimManager.init({
        delay: 100,
        defaultSimlet: null
    }).register({
        'Numbers': {
            data: [
                    [1, 'One'], [2, 'Two'], [3, 'Three'], [4, 'Four'], [5, 'Five']],
            stype: 'json'
        }
    });

var bl = Ext.create('Ext.view.BoundList', {
    multiSelect: true,
    allowDeselect: true,
    store: {
                fields: [ 'number', 'numberName'],
                  proxy: {
                    type: 'ajax',
                    url: 'Numbers',
                    reader: 'array'
                },
                autoLoad: true
            },
            displayField: 'numberName',
});

Ext.create('Ext.form.Panel', {
    title: 'FieldContainer Example',
    width: 550,
    bodyPadding: 10,
    tbar: [{
        text: 'Export Excel'
    }],
    items: [{
        xtype: 'fieldcontainer',
        fieldLabel: 'Last Three Jobs',
        labelWidth: 100,

        // The body area will contain three text fields, arranged
        // horizontally, separated by draggable splitters.
        layout: 'hbox',
        items: [bl]
    }],
    renderTo: Ext.getBody()
});
});