How can I programmically (in JS) disable some of the checkboxes of a MultiCombo based on some piece of information in the record?
Thanks,
/Z
Printable View
How can I programmically (in JS) disable some of the checkboxes of a MultiCombo based on some piece of information in the record?
Thanks,
/Z
Hello @Z!
This is not a supported feature. There's no way to set individual entries disabled. An extension to the component would be required to attain this behavior. I tried some simple overrides here but it also requires preventing the combo box selection model from selecting and deselecting the entries, thus the override wouldn't be that simple to implement such a feature.
You probably should use a combo box with custom drop down list and make it behave as you need. Maybe a good starting point would be here: Forms - Combo Box - Custom drop down list.
Hope this helps!
Hello!
I spent a little more time and could come up with this:
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.Code:<%@ 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>
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!
I came up with this and it works. this will disallow the checkbox when i dont want it. i just need to "style" the check to be disabled.
How can i do that?
Zev.
Code:<ext:MultiCombo ID="MultiTest">
<Listeners>
<BeforeSelect Handler="if (record.data.hasInfo) return true; else return false;" />
</Listeners>
</ext:MultiCombo>
Hello!
The sample I provided above does style the entry to look like disabled (grayed out). I can't think on anything better, but there are -- yes -- other ways on doing that.
i used it and it works well.
EXT should add a feature to allow to disable checks...
thxs!
/Z.
Hello!
That is indeed a good idea, but I think it was not the idea having a dropdown list with disabled individual items, so that's pretty much a hack. As you can see, the individual entries in the store should have a specific field in order to be able to discern between enabled and disabled entries. This could rather be thought of in grid panels with multi selection, and having the grid as the drop-down.
As a feature this may make it to version 4 as version 3 has been superseded for some time now.
Well, but glad it worked for you! Let us know if you want us to open a feature request on version 4 (or newer) for this functionality. I believe it would require at least a new config option to indicate which boolean store field would indicate the enabled/disabled state of the field.