Hello!
I spent a little more time and could come up with this:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<style type="text/css">
.x-multicombo-item-disabled {
opacity: 0.25;
}
</style>
<script type="text/javascript">
// This will allow disabled items to look like disabled
Ext.define('Ext.net.MultiCombo', {
override: 'Ext.net.MultiCombo',
getPicker: function () {
var me = this;
if (!me.picker) {
me.listConfig = me.listConfig || {};
if (!me.listConfig.getInnerTpl) {
me.listConfig.getInnerTpl = function (displayField) {
return '<div class="x-combo-list-item {[this.getItemClass(values)]}">' +
'<div class="x-mcombo-text">{' + displayField + '}</div></div>';
};
}
me.picker = me.createPicker();
me.mon(me.picker.getSelectionModel(), 'select', me.onListSelect, me);
me.mon(me.picker.getSelectionModel(), 'deselect', me.onListDeselect, me);
me.picker.tpl.getItemClass = Ext.Function.bind(me.getItemClass, me, [], true);
if (me.selectionMode !== "checkbox") {
me.picker.on("render", function () {
me.picker.overItemCls = "x-multi-selected";
}, me);
}
me.picker.on("viewready", me.onViewReady, me, { single: true });
}
return me.picker;
},
getItemClass: function (values) {
var me = this,
record,
//fieldValue = this.getValue(),
searchValue,
selected;
if (me.selectionMode === "selection") {
return "";
}
Ext.each(me.store.getRange(), function (r) {
// do not replace == by ===
if (r.get(me.valueField) == values[me.valueField]) {
record = r;
return false;
}
}, me);
selected = record ? me.picker.getSelectionModel().isSelected(record) : false;
var retClass = "x-mcombo-item-unchecked"
if (selected) {
retClass = "x-mcombo-item-checked";
}
if (record.data.disabled) {
retClass += " x-multicombo-item-disabled";
}
return retClass;
}
});
// This wil handle combobox's selection and abort it if the record has the 'disabled' field.
var handleBeforeSelection = function (item, record, index) {
if (record.data.disabled) {
return false;
}
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:MultiCombo ID="mc1" runat="server" Width="260">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
</Items>
<SelectedItems>
<ext:ListItem Value="2" />
<ext:ListItem Index="4" />
</SelectedItems>
<Listeners>
<%-- Allow handling the disabled field in records. --%>
<BeforeSelect Fn="handleBeforeSelection" />
<BeforeDeselect Fn="handleBeforeSelection" />
</Listeners>
</ext:MultiCombo>
<ext:Button
runat="server"
Text="Disable item 2."
Handler="App.mc1.store.getAt(1).data.disabled = !App.mc1.store.getAt(1).data.disabled; this.setText((this.text[0] == 'D' ? 'En' : 'Dis') + 'able item 2.');"
/>
</div>
</form>
</body>
</html>
DISCLAIMER: use it at your own discretion. We can't guarantee this is going to work thru different Ext.NET versions nor offer extended support on the specific feature this adds to the component. I mean, this is a rough example on how to attain the behavior you described and we can't guarantee it is totally bug-free.
That said, the code provided here should be used as a starting point for you to get your functionality. More development should be required to make the changes consistent.
Hope this helps!