JSFiddle - React, Tailwind, and code Playground
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-6.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: 'Coloring MultiSelect Items - Ext 4.2',
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="inner-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,...