如何在 ExtJS 4.2.1 的组合框中禁用特定数据

Question

如何在 ExtJS 4.2.1 的组合框中禁用特定数据项？这 组合框值是数据和值对：

orderTypes = [
    ['Local', 'Local'],
    ['Device', 'Device'],
    ['None', 'None']
];

我想禁用组合框中的值“设备”。所以我尝试了下面的代码，其中orderComboTwo 是我的comboxbox。但是，它不会禁用组合框中列出的数据。

 orderComboTwo.getStore().data.items[1].data.disabled = true;

Answer 1

默认情况下，ComboBox 无法禁用某些条目。

但是，它具有beforeselect 事件，您可以使用该事件来告诉组合框是否可以选择某个值，具体取决于例如在另一个组合框的当前选定值上：

[{
    xtype:'combo',
    listeners:{
        beforeselect:function(cb, record) {
            if(cb.nextSibling().getSelection().indexOf(record) > -1) return false;
        }
    },
},{
    xtype:'combo',
    listeners:{
        beforeselect:function(cb, record) {
            if(cb.previousSibling().getSelection().indexOf(record) > -1) return false;
        }
    }
}]

当然，您始终可以覆盖 ComboBox 以添加基于布尔模型字段禁用某些项目的可能性：

Ext.define('MyApp.ux.DisableCombo',{
    extend: 'Ext.form.field.ComboBox',
    xtype:'disablecombo',
    disabledItemCls: 'disabledListItem',
    disabledField: 'disabled',
    onBeforeSelect: function(list, record, recordIndex) {
        if(record.get(this.disabledField)) return false;
        this.callParent(arguments);
    },
    initComponent: function() {
        var me = this;
        if(!me.listConfig) me.listConfig = {};
        Ext.apply(me.listConfig, {
            tpl: new Ext.XTemplate(
                '<ul class="' + Ext.plainListCls + '"><tpl for=".">',
                    '<li role="option" unselectable="on" class="' + Ext.baseCSSPrefix + 'boundlist-item' + '<tpl if="' + me.disabledField + '"> ' + me.disabledItemCls + '</tpl>">{' + me.displayField + '}' + '</li>',
                '</tpl></ul>'
            )
        });
        me.callParent(arguments);
    }
});

我有 made a fiddle for you 来看看它的实际效果。