View Full Version : several checkboxes "on the same line"

24 Feb 2010, 12:57 AM
I want to arrange several checkboxes next to each other on the "on the same (invisible) line" to look like this:

cyan [checkbox] magenta [checkbox] yellow [checkbox] key [checkbox] preview [some kind of rectangular in which a preview of the color is shown]

I created a panel and played around with the column and hbox layouts, but so far to no avail.


xtype: 'panel',
layout: 'hbox',
height: 100,
items: [{
xtype: 'checkbox',
fieldLabel: 'C',
columnWidth: .50,
xtype: 'checkbox',
fieldLabel: 'M',
columnWidth: .50,
}Why is is not working the way I want it to work and how can I fix it?

24 Feb 2010, 6:30 AM
Please, can somebody help me?

Is this problem too easy or too difficult to solve?

24 Feb 2010, 6:41 AM
Now I have adapted example code that does what I want. I still don't know why my code isn't working, but hey...

24 Feb 2010, 6:47 AM
wrap your checkboxes in a container who's using the formLayout

24 Feb 2010, 8:12 AM
wrap your checkboxes in a container who's using the formLayout

Ext.form.CheckboxGroup. I use them regularly for just such a layout. jgarcia is right, you certainly have to have a 'form' layout to render the checkboxgroup into or you won't get any labels (like in your screenshot.) Depending on what information you are attempting to pass by checking the box you may or may not have to override the getValue method to get what you want during processing.