如何禁用 Ext JS 中组合框中的项目？

Question

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

例如我有这些记录

row_1_type_1
row_2_type_2
row_3_type_3

我想禁用第三行，即它应该作为标签保留在组合中，但它将显示为灰色且不可单击。

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

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
{
}

您可以在文档中找到有关模板的更多信息

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

Answer 4

ordman 的非常棘手的例子。但通常认为禁用的参数来自后端的布尔值，所以你需要对其进行一些计算。

顺便说一句，添加 x-item-disabled 类会使项目变得不可选择。如果您只需要指出具有选择能力的禁用项目，我使用简单的内联样式。

您还可以通过在Ext.XTemplate中添加功能来使用条件并操作所有记录数据。

这是 7.6 和 6.6 的工作示例：

   Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        valueField: 'abbr',
        displayField: 'name',
        renderTo: Ext.getBody(),
        tpl: Ext.create('Ext.XTemplate',
            '<ul class="x-list-plain"><tpl for=".">',
                '{[this.getItemTpl(values)]}',
            '</tpl></ul>',
            {
                getItemTpl: function(itm) {
                    console.log(itm)
                    const colorStyle = (itm.isActive) ? '' : 'style="color:grey"';
                    // uncomment disabledCls to make item unchoosable
                    //const disabledCls = (itm.isActive) ? '' : 'x-item-disabled';
                    return `<li role="option" class="x-boundlist-item ${disabledCls}" ${colorStyle}> ${itm.abbr} - ${itm.name}</li>`;
                }
            }
        )
    });