Question

我的应用程序中有多选组件，我们有两种不同的相同形式的视图。

查看1 - 所有组件都是可编辑和可选择的
视图2 - 在此视图中，用户只能看到他在View1中所做的选择（禁用所有表单组件）。使用以下代码我禁用了所有表单组件。但是这里有多选组件的问题，即使我禁用了用户的编辑功能，我仍然希望允许它们滚动列表。
```
    this.getView().query('form displayfield,textfield,radiogroup,multiselect').forEach(function(item) {
        item.setDisabled(true);
    });
```

我尝试使用listConfig属性禁用选择，这可行。但动态我无法应用此属性。

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

我怎样才能做到这一点？请提前感谢您的宝贵意见。

谢谢！

Answer 1

您应该能够在与多重选择相关联的BoundList上调用禁用和启用功能，以动态实现此功能。

喜欢以下......

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

编辑：

所以我刚刚意识到这并不能完全解决你的问题，因为在调用disable函数后仍然会禁用滚动。这是因为ExtJS将掩码应用于禁用用户交互的整个元素（包括滚动条）。

您可以做的一件事是修改蒙版DOM元素的样式（在本例中为宽度）。它可能不是最优雅的解决方案，但它可以解决您的问题。

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
});

Answer 2

鉴于disableSelection: true适合你，你应该能够通过调用动态地实现相同的效果：

＆＃13;

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

＆＃13;

ExtJS 5 - 在Multiselect组件禁用状态下启用Scroll

2 个答案: