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

CSS

.x-boundlist-item {
    padding: 0;
}
.inner-boundlist-item {
    padding: 0 3px;
}

.red {
    background-color: rgba(255,0,0,0.2);
}
.white {
    background-color: transparent;
}

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.form.Panel',
    'Ext.ux.form.MultiSelect',
     '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'
        }
    });
Ext.create('Ext.form.Panel', {
    width: 300,
    height: 230,
    title: 'Summary Test',
    style: 'padding: 20px',
    layout: 'fit',
    renderTo: document.body,
    
    items: [{
            anchor: '100%',
            xtype: 'multiselect',
            msgTarget: 'side',
            fieldLabel: 'Multiselect',
            name: 'multiselect',
            id: 'multiselect-field',
            allowBlank: false,
            store: {
                fields: [ 'number', 'numberName','color' ],
                  proxy: {
                    type: 'ajax',
                    url: 'Numbers',
                    reader: 'array'
                },
                autoLoad: true
            },
            valueField: 'number',
            displayField: 'numberName',
            value: ['3','5'],
            listConfig: {
                itemTpl: '<div class="my-boundlist-item {color}">{numberName}</div>',
            }
    }],
    tbar: [{
        xtype: 'button',
        text: 'Red',
        handler: function(){
            var selection = Ext.getCmp('multiselect-field').getSelected();
            Ext.Array.each(selection, function(rec){
                rec.set('color', 'red');
            });
        }
    },{
        xtype: 'button',
        text: 'White',
        handler: function(){
            var selection = Ext.getCmp('multiselect-field').getSelected();
            Ext.Array.each(selection, function(rec){
               ...