ExtJs4 how to disable all fields and all buttons on a panel recursively

问题

I'm trying to disable all clickable, editable components on my panel.

Calling panel.disable() grays it out, but buttons are still clickable. The same result gives panel.cascade with a function that disables each component.

What is the right way to do this?

回答1:

If you are using ExtJs 4.x, this is what you are looking for -

myFormPanel.query('.field, .button').forEach(function(c){c.setDisabled(false);});

(Modify your selector based on the complexity of your form. You can just use .component and it will disable all component in your form)

回答2:

Assuming that you used a FormPanel you can use this method to get form:

getForm() // see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-method-getForm

This will return the Ext.form.Basic object. From here you have access to all the fields on this form with method:

getFields() // see http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-getFields

Now cou can iterate through the field and disable them. Notice also the method applyToFields() where you can pass your object. See API information: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-applyToFields

Good luck!

回答3:

This is a better solution to disabling all form fields inside a form panel.

var formPanelName = Ext.ComponentQuery.query('#formPanelId field');
for(var i= 0; i < formPanelName.length; i++) {
   formPanelName[i].setDisabled(true);
}

Just get a reference to the form panel fields. Iterate over each field and use the setDisabled function to set its readOnly attribute to true.

You can also take it a set further and grab the entire form Panel. This solution above only grabs individual sections of the form panel by its ID. extjs 4

回答4:

For those manually adding fieldsets and fields to a form panel, ExtJS doesn't require you to add components directly to the form, by doing a getForm() first. It's mainly for convenience, and allows standard functionality to work properly. So whatever component you did the 'add' from, iterate from that component.

Example 1:

Normally you should not use the 'id' to get a component since it's set dynamically. But this shows how you could get the form panel itself using the getCmp.

            var formPanel = Ext.getCmp('id-of-component');
            var fieldSet = Ext.create('Ext.form.FieldSet', {
                title: 'field set'                    
            });
            formPanel.add(fieldSet);

When iterating, you would do this:

formPanel.each(function(item) {
  alert(item.title);
});

Example 2:

In this example, we add to the actual form itself, so the iteration looks slightly different.

            var formPanel = Ext.getCmp('id-of-component');
            var fieldSet = Ext.create('Ext.form.FieldSet', {
                title: 'field set'                    
            });
            formPanel.getForm().add(fieldSet);

When iterating, you would do this:

formPanel.getForm().each(function(item) {
  alert(item.title);
});

来源：https://stackoverflow.com/questions/9368466/extjs4-how-to-disable-all-fields-and-all-buttons-on-a-panel-recursively

标签

extjs

extjs4