ExtJS 5 - Enable Scroll in Multiselect component disabled state

Question

I have multiselect component in our application, we have 2 different views of the same form.

1. View 1 - All the components would be editable and selectable

2. View 2 - Whereas in this view, user can only see the selection that he made in View1(disable all the form components). Using the below code i disabled all the form components. But the problem here with the multiselect component, even though i disabled the editing capability from the user, still i want to allow them for scrolling through the list.

       this.getView().query('form displayfield,textfield,radiogroup,multiselect').forEach(function(item) {
           item.setDisabled(true);
       });
   

I tried to the disable the Selection using the listConfig property, this works. But dynamically i couldn't able to apply this property.

            {
                xtype:'multiselect',                                        
                fieldLabel: 'Employee Names',
                valueField: 'enameCode',
                displayField: 'enameValue',
                listConfig : {
                    disableSelection: true
                }                       
        }

How can i achieve this? Please provide your valuable inputs, thanks in advance.

Thanks!

Answer 1

Given that disableSelection: true works for you, you should be able to achieve the same effect dynamically by calling:

YourMultiselectComponent.boundList.getSelectionModel().setLocked(true)

Answer 2

You should be able to call the functions disable and enable on the BoundList associated with the multiselect to achieve this dynamically.

Like follows...

Ext.ComponentQuery.query('boundlist').forEach(function(item) {
    item.disable();
});

EDIT:

So I just realised that this doesn't entirely solve your problem as scrolling will still be disabled after calling the disable function. This is because ExtJS applies a mask to the entire element (including the scrollbar) that is disabled to prevent user interaction.

One thing you could do is to modify the style (width in this case) of the mask DOM element. It may not be the most elegant solution but it would fix your problem.

Ext.ComponentQuery.query('boundlist').forEach(function(boundlist) {
    boundlist.disable();

    var boundlistDOM = boundlist.el.dom;
    var maskDOM = boundlistDOM.getElementsByClassName('x-mask')[0];
    mask.style.width = "94%"; // or value so that the mask does not cover scrollbar
});