JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.sencha.com/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script src="http://cdn.sencha.com/ext-3.2.0/ext-all.js"></script>
<script src="http://cdn.sencha.com/ext-3.2.0/examples/ux/MultiSelect.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext-3.2.0/resources/css/ext-all.css">
CSS
.x-list-body dt em {
padding: 0;
}
.inner-boundlist-item {
padding: 4px 3px;
}
.red {
background-color: rgba(255, 0, 0, 0.2);
}
.white {
background-color: transparent;
}
JavaScript
Ext.ux.form.ConfigurableMultiSelect = Ext.extend(Ext.ux.form.MultiSelect, {
listItemTpl: null,
onRender: function(ct, position) {
Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
var fs = this.fs = new Ext.form.FieldSet({
renderTo: this.el,
title: this.legend,
height: this.height,
width: this.width,
style: "padding:0;",
tbar: this.tbar
});
fs.body.addClass('ux-mselect');
var listItemTpl = this.listItemTpl || '<div>{' + this.displayField + '}</div>';
this.view = new Ext.ListView({
multiSelect: true,
store: this.store,
columns: [{
dataIndex: this.displayField,
header: 'Value',
width: 1,
tpl: listItemTpl
}],
hideHeaders: true
});
fs.add(this.view);
this.view.on('click', this.onViewClick, this);
this.view.on('beforeclick', this.onViewBeforeClick, this);
this.view.on('dblclick', this.onViewDblClick, this);
this.hiddenName = this.name || Ext.id();
var hiddenTag = {
tag: "input",
type: "hidden",
value: "",
name: this.hiddenName
};
this.hiddenField = this.el.createChild(hiddenTag);
this.hiddenField.dom.disabled = this.hiddenName != this.name;
fs.doLayout();
},
});
Ext.reg('confmultiselect', Ext.ux.form.ConfigurableMultiSelect);
Ext.onReady(function() {
var store = new Ext.data.ArrayStore({
fields: ['value', 'text', 'color'],
data: [
[1, 'One'],
[2, 'Two'],
[3, 'Three'],
[4, 'Four'],
[5, 'Five']
]
});
var panel = new Ext.form.FormPanel({
width: 300,
height: 230,
title: 'Coloring MultiSelect Items - Ext 3.2',
style: 'padding: 20px',
renderTo: document.body,
items: [{
anchor: '80%',
xtype: 'confmultiselect',
fieldLabel: 'Multiselect',
name: 'multiselect',
id: 'multiselect-field',
allowBlank: false,
displayField: 'text',
store: store,
...