Main Region

How do I change the width of Checkbox Items and Radio Items when displayed on a single row
1 answer | 863 views

MN
Nov 21, 2014 09:19 +00:00

During the development of our internal systems I had the requirement for a checkbox group to appear in a single row and that the number of entries in the row could be variable. Using the existing settings all checkboxes would be assigned an equal width in a fixed number of columns resulting in blank space.

alt text

What I want is that they only take up the space they require with 10px of padding between each item. How can I do this?

0 comments

MN
Nov 21, 2014 09:25 +00:00

To avoid this problem we need to change the layout of the checkbox group (this also applies to radio groups as well) by adding some additional config e.g.

"width":660,"layout":"hbox","defaults":{"padding":"0 10 0 0"}

See the sencha documentation for more details on the settings: http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.form.CheckboxGroup alt text

The end result is now as what was required.

alt text

Note: using a hbox layout will mean that all items will appear on the one row. If you have more items than space defined by your width setting they will be cut off or hidden.

0 comments

You must log in or sign up to post questions and answers.