ExtJs: how to disable fieldset on button click event

Question

I have a fieldset defined on my page. Now I want to enable or disable this field set on button click event. But it is not working properly. Below is the code I have written:

To Disable:

this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
    field.disable();
});

To Enable:

this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
    field.enable();
});

• Issue-1 : When I disable fieldset, it seems to be disabled visually. But still I can access controls inside it.
• Issue-2 : Once it is disabled, I cannot re-enable it.

I need a working sample with these two issues resolved.

Currently I am using version 4.2 of ExtJs

Answer 1

You should call the setDisabled function on the fieldset. It will disable all containing components.

fieldset.setDisabled(true);
// the fieldset and all inner components are disabled

fieldset.setDisabled(false);
// the fieldset and all inner components are enabled

See the Sencha ExtJs 4.2.0 documentation and the following minimal working example can be found on Sencha Fiddle.

Ext.create('Ext.panel.Panel',{
    items: [{
        xtype: 'fieldset',
        itemId: 'fieldsetId',
        items: [{
                    xtype: 'checkbox',
                    fieldLabel: 'Check 1'
                },{
                    xtype: 'checkbox',
                    fieldLabel: 'Check 2'
                },{
                    fieldLabel: 'Combo 1',
                    xtype: 'combobox',
                    store: ['value1','value2','value3']
                }]
    }, {
        xtype: 'button',
        text: 'Disable fieldset',
        handler: function (button) {
            var fieldset = Ext.ComponentQuery.query('panel > #fieldsetId')[0];
            var toggle = !fieldset.isDisabled();
            var text = (toggle ? 'Enable' : 'Disable') + ' fieldset';
            fieldset.setDisabled(toggle);
            button.setText(text);
        }
    }],
    renderTo: Ext.getBody()
});

Answer 2

Paste this into a Sencha fiddle and hit Run:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');

        Ext.create('Ext.window.Window', {
            height: '100%',
            width: '100%',
            autoShow:true,
            bodyPadding: 25,
            title:'win',
            items: [{
                xtype: 'fieldset',
                items: [{
                    xtype: 'checkbox',
                    fieldLabel: 'field1'
                },{
                    xtype: 'checkbox',
                    fieldLabel: 'field2'
                },{
                    fieldLabel: 'field3',
                    xtype: 'combo',
                    store: ['asdf','zzasdf','dfdf']
                }]
            }, {
                xtype: 'button',
                text: 'Enable/Disable entire fieldset',
                handler: function(btn){
                    var fset = btn.up('window').down('fieldset');
                    fset.setDisabled(!fset.disabled);
                }
            }, {
                margin: '0 0 0 10',
                xtype: 'button',
                text: 'Enable/Disable each field in fieldset individually',
                handler: function(btn){
                    var fset = btn.up('window').down('fieldset');
                    fset.items.each(function(i){
                        i.setDisabled(!i.disabled);
                    });
                }
            }]
        });
    }
});