Weird bug preventing ExtJS checkboxes from submitting properly

This applies to ExtJS 2.2, the most current version as of the time of writing.

Checkboxes often make their way into my Ext JS forms. Sometimes, though, they don't behave as expected. Checking and unchecking them would frequently fail, simply not doing anything. Sometimes it would work, sometimes it wouldn't - how frustrating!

It turns out there is a bug with ticking/unticking checkboxes in Ext. If you click on the checkbox itself everything works fine - the image of the checkbox updates and the correct value is submitted. If however you click on the checkbox's label, the image of the checkbox is updated but the correct value is not submitted. So if the box started off unticked and you ticked it by clicking the label, the image is updated but nothing else happens.

This is extremely unintuitive because you can see that the box has been checked, but its internal representation hasn't actually changed. Because I usually click the label this took me over an hour to track down, so I hope this helps someone out. Once I had identified the bug, a quick Google search points to this thread on the ExtJS forums, which has some guidance on this.

Share Post:

What to Read Next

For readers grappling with ExtJS form component issues, the post ExtJS Radio Buttons and Square Brackets offers insights into a similar problem with radio button naming conventions. Additionally, learning about upcoming advancements in the framework through articles like Ext JS 3.2 beta out today and Ext JS 4.0.7 Released could provide helpful context for improvements and bug fixes in later versions.

Ext JS 4.0.7 Released

I'm very happy to report that we released Ext JS 4.0.7 to the public today. This is the seventh patc