View Full Version : Enable/Disable buttons based on value change in other components

7 Sep 2011, 5:57 AM

I am new to ExtJs.
I have in a cshtml file a grid panel/form panel. It has many components like text field.combo, etc..
At the bottom of it I have buttons like Save,Cancel etc.

When the form loads I want to disable these buttons and when there is any change in the components, I want to enable the buttons.
Can someone please tell me a better way to do that. I have looked at the 'Action' but doesn't look like that will solve my issue.

Any help is highly appreciated.


7 Sep 2011, 6:03 AM
You'll want to add listeners to the components events that your interested in.
Look at the doc each component has many events.

7 Sep 2011, 9:36 AM
Thanks for your reply.
I am trying to avoid adding listeners to every object. If there is way to set a property or set a default event for the panel, so that every component can subscribe to it?, you know, something on that line.


7 Sep 2011, 10:07 AM
You can bubble events and listen to them in the parent. to be honest, I think the cleaner way is to configure listeners on the components themselves, that way you know what's being registered where and what's firing the event!

8 Sep 2011, 3:04 AM
To add to what the others have said, adding individual listeners isn't as painful as it sounds. There are several ways to add them en masse:

The defaults config option might work if all the fields are immediate children of the same parent (unlikely).
In the MVC it just needs a correctly written selector. A similar approach using component queries would work even without the MVC.
Forms have a getFields() method you could use to grab all the fields.

12 Sep 2011, 11:31 AM
Hi Skirtle,

Sounds like your method might be useful for me.
In my form.Panel, I have components with xtype as displayfield, numberfield, checkboxfield etc.. I am trying to avoid writing listener for every componenet. So if I can write an event at the top as in Panel level and then it listens to any change being done in the component and fires the event, that will be nice.
like MonitorValid. If there is something called MonitorChange on the panel level it will serve my purpose.
Can you give a kind of snippet, how do you envision this to be.

Thanks and appreciate your reply.