[CLOSED] MultiCombo - disable some checks

  1. #1

    [CLOSED] MultiCombo - disable some checks

    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
    Last edited by fabricio.murta; May 12, 2017 at 11:47 PM.
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    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.

     <ext:MultiCombo ID="MultiTest">
                                        <Listeners>
                                            <BeforeSelect Handler="if (record.data.hasInfo) return true; else return false;" />
                                        </Listeners>
     </ext:MultiCombo>
  5. #5
    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.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    i used it and it works well.
    EXT should add a feature to allow to disable checks...
    thxs!
    /Z.
  7. #7
    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.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] MultiCombo
    By opendat2000 in forum 4.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 09, 2016, 2:55 PM
  2. MultiCombo and IE8
    By Birgit in forum 2.x Help
    Replies: 1
    Last Post: Dec 07, 2012, 9:15 AM
  3. How to add a multicombo in gridpanel?
    By reezvi in forum 1.x Help
    Replies: 0
    Last Post: Mar 23, 2012, 8:04 PM
  4. selected value in MultiCombo
    By difa in forum 1.x Help
    Replies: 1
    Last Post: Dec 08, 2011, 1:30 PM
  5. [CLOSED] Click Disable MultiCombo
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 21, 2010, 11:59 AM

Posting Permissions