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