CODEWITHSUNDEEP
javascriptextjs
Naren Sathya
Naren Sathya

Reputation: 21

How to disable a particular data in the combo-box in ExtJS 4.2.1

How do I disable a particular data item in a combo-box in ExtJS 4.2.1? The combo-box values are data and value pairs:

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

I want to disable the value 'Device' in the combo-box. So I used tried the code below, where orderComboTwo is my comboxbox. However it is not disabling the data listed in the combo-box.

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

Upvotes: 1

Views: 3099

Answers (1)

Alexander
Alexander

Reputation: 20224

A ComboBox does not have the possibility to disable certain entries by default.

However, it has the beforeselect event which you can use to tell the combobox whether a certain value may be selected or not, depending e.g. on the currently selected value of another combobox:

[{
    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;
        }
    }
}]

And of course you can always override the ComboBox to add the possibility to disable certain items based on a boolean model field:

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

I have made a fiddle for you to see it in action.

Upvotes: 2

Related Questions