Как отключить определенные данные в поле со списком в ExtJS 4.2.1

Question

Как отключить определенный элемент данных в поле со списком в ExtJS 4.2.1? Значения поля со списком представляют собой пары данных и значений:

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

Я хочу отключить значение "Устройство" в поле со списком. Так что я использовал попробовал код ниже, где orderComboTwo мой комбокс Однако это не отключает данные, перечисленные в поле со списком.

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

Я сделал скрипку для вас, чтобы увидеть это в действии.