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

Question

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?

Answer 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)

See also - Ext.ComponentQuery

If you are using 3.x, you can achieve the same effect in two steps like this -

myFormPanel.buttons.forEach(function(btn){btn.setDisabled(true);}); //disable all buttons
myFormPanel.getForm().items.each(function(itm){itm.setDisabled(true)}); //disable all fields

Answer 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!

Answer 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

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