如何在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);
    }
});

我为您准备了一个小提琴，供您观看。