- Rendering the textfield into the layout template (line 34)
- Using the Ext.util.TextMetrics class to determine the pixel width of the text field prompt and then setting its labelWidth property accordingly (lines 30-31)
- Overriding the getValue(), setValue(), getSubmitData(), and getModelData() fields to handle the textfield input.
Wednesday, April 2, 2014
Developing an Ext JS 4 Checkbox Group with “Other (please specify)” option
I’m currently working on a dynamic forms/workflow solution for one of our clients. One of the requirements is to allow the user to not only choose from a set of values that are represented as a series of checkboxes, but also be able to specify their own custom value if necessary.
In order to meet this requirement I subclassed the Ext.form.CheckboxGroup and it’s related layout – Ext.layout.container.CheckboxGroup
Defining a custom layout
Making room for the additional checkbox was a relatively straightforward affair. We just added an additional row to the layout class’ render template as illustrated on line 15 of the following source listing :
Extending the Ext.form.CheckboxGroup class
The final step was to extend the Ext.form.CheckboxGroup class in order to inject the “Other” textfield. This involved:
What are you waiting for?
[Written by: Steve Drucker]