[CLOSED] MultiCombo - disable some checks

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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.

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