如何禁用Ext JS中的组合框中的项目？ [英] How to disable items in a combobox in Ext JS?

问题描述

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

How can I disable specific items in a combobox in Ext JS?

例如我有这些记录

row_1_type_1
row_2_type_2
row_3_type_3

并且我想要禁用第三行，即它应该保留在组合中作为标签，但它会变灰，不可点击。

and I want to disable the third row i.e it should stay in the combo as label but it will be greyed out and not clickable.

推荐答案

这里有一个解决方案，您至少可以使用Ext JS 4.2.1。这是一个插件，它根据每个记录的值禁用边界列表中的某些项目。要查看listitem是否被禁用的字段的名称可以被配置。

Here's a solutions that you can use at least for Ext JS 4.2.1. It's a plugin that disables some items in the boundlist based on the value of each record. The name of the field to check if the listitem should be disabled can be configured.

让我们从如何使用插件开始。

Let's start with how to use the plugin.

{
    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。它会损坏残疾人物品，并确保残疾人物在悬停时不会改变其背景，以表明可以选择。

And here's some css to go with the plugin. It greys out the disabled items and makes sure that the disabled items when hovered don't get its background changed as to suggest that it would be selectable.

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

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

这篇关于如何禁用Ext JS中的组合框中的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！