Javascript 如何在ExtJS中禁用组合框中的项目？

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

例如，我有这些记录

row_1_type_1
row_2_type_2
row_3_type_3

---

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

您可以使用以下工具尝试类似的操作：

myItems：[
{name:'row_1_type_1'，disabled:false}，
{name:'row_2_type_2'，disabled:false}，
{name:'row_3_type_3'，disabled:true}
]
列表配置：{
getInnerTpl:函数（显示字段）{
返回Ext.create（'Ext.XTemplate'，
“
{#}-{name}
”
);
}
}
//CSS
.x-禁用项
{
}
.x-自定义项
{
}

---

您可以找到更多关于

的信息。您可以通过以下方式尝试类似的内容：

myItems：[
{name:'row_1_type_1'，disabled:false}，
{name:'row_2_type_2'，disabled:false}，
{name:'row_3_type_3'，disabled:true}
]
列表配置：{
getInnerTpl:函数（显示字段）{
返回Ext.create（'Ext.XTemplate'，
“
{#}-{name}
”
);
}
}
//CSS
.x-禁用项
{
}
.x-自定义项
{
}

---

您可以找到有关

的更多信息，这里有一个至少可以用于Ext JS 4.2.1的解决方案。它是一个插件，根据每条记录的值禁用边界列表中的某些项。可以配置用于检查是否应禁用listitem的字段的名称

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

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

这是插件

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

---

下面是一个至少可以用于ExtJS4.2.1的解决方案。它是一个插件，根据每条记录的值禁用边界列表中的某些项。可以配置用于检查是否应禁用listitem的字段的名称

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

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

这是插件

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

---

还有其他更简单的解决方案吗？我可以使用ExtJSAPI来做这件事吗？应该“禁用”什么？您的意思是禁用=“禁用”属性。为什么我在dom中得到组合框的div而不是ul、il、option等？当我滚动组合框时，我看到了[object object]。如何取而代之地获得标签？我想如果disabled为true，这将有助于将字体颜色更改为灰色，但它会实际禁用该字段，使我无法单击它吗？还有其他更简单的解决方案吗？我可以使用ExtJSAPI来做这件事吗？应该“禁用”什么？您的意思是禁用=“禁用”属性。为什么我在dom中得到组合框的div而不是ul、il、option等？当我滚动组合框时，我看到了[object object]。如何取而代之地获得标签？我想如果disabled为true，将字体颜色更改为灰色会起作用，但它会实际禁用该字段，使我无法单击它吗？