Question

我的页面上定义了fieldset。现在我想在按钮点击事件上启用或禁用此字段集。但它不能正常工作。以下是我写的代码：

要停用：

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

启用：

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

Issue-1 ：当我禁用fieldset时，它似乎在视觉上被禁用。但我仍然可以访问其中的控件。
问题-2 ：禁用后，我无法重新启用它。

我需要一份解决这两个问题的工作样本。

目前我正在使用version 4.2

的ExtJs

Answer 1

您应该在字段集上调用setDisabled函数。它将禁用所有包含的组件。

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和 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

将其粘贴到Sencha fiddle并点击运行：

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

ExtJs：如何在按钮单击事件上禁用字段集

2 个答案: