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

Question

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

禁用：

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

启用：

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

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

我需要一个解决了这两个问题的工作示例。

目前我正在使用 version 4.2 的 ExtJs

Answer 1

将其粘贴到 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);
                    });
                }
            }]
        });
    }
});

Answer 2

您应该在字段集上调用 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()
});

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

ExtJs: how to disable fieldset on button click event

extjs

extjs4.2

fieldset