如何在Ext JS中禁用下拉框中的选项？

Question

如何在Ext JS中禁用组合框中的特定项？

例如，我有以下记录：

row_1_type_1
row_2_type_2
row_3_type_3

我希望你能帮我翻译一下关于IT技术的内容。需要翻译的内容是：我希望禁用第三行，即它应该保留在组合框中作为标签，但会变灰并且无法点击。

- Vlad

Answer 1

以下是您可以至少在 Ext JS 4.2.1 中使用的解决方案。这是一个插件，可以根据每个记录的值禁用绑定列表中的某些项目。要检查列表项是否应禁用的字段名称可以进行配置。

现在让我们来看如何使用这个插件。

{
    xtype: 'combo',
    fieldLabel: 'My combo with disabled items',
    valueField: 'value',
    displayField: 'display',
    queryMode: 'local',
    store: {
        fields: ['value', 'display', 'disabled'],
        data: [{
            value: 1, display: 'an enabled item', disabled: false
        },{
            value: 2, display: 'a disabled item', disabled: true
        }]
    },
    plugins: [{
        ptype: 'comboitemsdisableable',
        disabledField: 'disabled'
    }]
}

这里是插件。

Ext.define('Ext.ux.plugin.ComboItemsDisableable', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.comboitemsdisableable',

    init: function (cmp) {
        var me = this; // the plugin
        me.disabledField = me.disabledField || 'disabled';

        cmp.tpl = Ext.create('Ext.XTemplate',
            '<tpl for=".">',
            '  <tpl if="this.isDisabled(' + me.disabledField + ')">',
            '    <div class="x-boundlist-item x-item-disabled"><em>{' + cmp.displayField + '}</em></div>',
            '  <tpl else>',
            '    <div class="x-boundlist-item">{' + cmp.displayField + '}</div>',
            '  </tpl>',
            '</tpl>', {
                isDisabled: function(disabled) {
                    return disabled;
                }
            }
        );

        // make sure disabled items are not selectable
        cmp.on('beforeselect', function(combo, record, index) {
            return !record.get(me.disabledField);
        });
    }
});

以下是与插件配套的一些CSS样式。它使禁用的项目变灰，并确保当用户悬停在禁用的项上时，背景不会改变，以表明该项是可选择的。

.x-item-disabled.x-boundlist-item {
    color: #8c8c8c;
    cursor: default;
}

.x-item-disabled.x-boundlist-item-over {
    background: inherit;
    border-color: white;
}

- Christiaan Westerbeek

Answer 2

您可以尝试使用listConfig来实现类似以下的功能：

myItems: [
    { name: 'row_1_type_1',  disabled: false},
    { name: 'row_2_type_2',  disabled: false},
    { name: 'row_3_type_3',  disabled: true }
]

listConfig: {
    getInnerTpl: function(displayField) {
        return Ext.create('Ext.XTemplate',
            '<ul><li role="option"',
            '<tpl for=".">',
            '<tpl if="disabled == true">',
                'class="x-disabled-item"',
            '<tpl else>',
                'class="x-custom-item"',
            '</tpl>',
            '>{#} - {name}</li></ul>'
        );
    }
}

//CSS
.x-disabled-item
{
}

.x-custom-item
{
}

你可以在文档中了解更多关于模板的内容

- A1rPun

---

有没有更简单的解决方案？我能否使用ExtJS API来实现这个？ - Vlad

什么应该被“禁用”？你是指禁用 = "禁用" 属性吗？为什么在 DOM 中的组合框里我会得到 div 元素而不是 ul、il、option 等？ - Vlad

当我滚动组合框时，我看到的是[object Object]。该怎么做才能得到标签呢？ - Vlad

我猜如果disabled为true，这将适用于将字体颜色更改为灰色，但它是否会实际禁用该字段，以至于我根本无法单击它？ - Vlad

Answer 3

Ext6的解决方案

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var states = Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name', 'disabled'],
            data: [{
                "abbr": "AL",
                "name": "Alabama",
                "disabled": '',
            }, {
                "abbr": "AK",
                "name": "Alaska",
                "disabled": 'x-item-disabled',
            }, {
                "abbr": "AZ",
                "name": "Arizona",
                "disabled": '',
            }]
        });

        Ext.create('Ext.form.ComboBox', {
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            valueField: 'abbr',
            renderTo: Ext.getBody(),
            // Template for the dropdown menu.
            // Note the use of the "x-list-plain" and "x-boundlist-item" class,
            // this is required to make the items selectable.
            tpl: Ext.create('Ext.XTemplate',
                '<ul class="x-list-plain"><tpl for=".">',
                '<li role="option" class="x-boundlist-item {disabled}">{abbr} - {name}</li>',
                '</tpl></ul>'
            ),
            // template for the content inside text field
            displayTpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                '{abbr} - {name}',
                '</tpl>'
            )
        });

    }
});

在这里尝试代码 https://fiddle.sencha.com/#view/editor

- ordman