How to generate a form in columns?

[chris24300]

Hi all,

I have a library I want to display in two columns to make it more user friendly. It's a general list of event scenarios (which is basically anything), e.g. vehicle issues, house issues, etc and these have associated info on what you may encounter. This page in particular is a settings interface where the user can select what info they want displayed on their home screen. The events are split up into fieldsets with x amount of checkboxes.

Each fieldset has a checkbox group with the selections but what happened is every checkbox option is in the first fieldset and they are all in 1 column...

var leftFields = [{
    xtype: 'fieldset',
    title: 'Home',
    items: [{
        xtype: 'checkboxgroup',
        id: 'homeCbGroup',
        columns: 1,
        items: [
            {id: 'cb1', name: 'cb1', boxLabel: 'Carpentry'},
            {id: 'cb2', name: 'cb2', boxLabel: 'Plumbing'},
            {id: 'cb3', name: 'cb3', boxLabel: 'Electrical'},
             ...
       ] // items
    }] // fieldset items
},{
    xtype: 'fieldset',
    title: 'Automotive',
    items: [{
        xtype: 'checkboxgroup',
        id: 'autoCbGroup',
        columns: 1,
        items: [
            {id: 'cb1', name: 'cb1', boxLabel: 'Engine'},
            {id: 'cb2', name: 'cb2', boxLabel: 'Body'},
            {id: 'cb3', name: 'cb3', boxLabel: 'Maintenance'},
             ...
       ] // items
    }] // fieldset items
},...]; // left fields
// same idea for rightFields

var add = [{
            xtype: 'fieldset',
            title: 'Event Scenarios',
            layout: 'form',
            items: [{
                id: 'scenariosLeftColumn',
                layout: 'form',
                border: false,
                columnWidth: 0.6,
                items: leftFields
            },{
                id: 'scenariosRightColumn',
                layout: 'form',
                border: false,
                labelWidth: 65,
                columnWidth: 0.4,
                items: rightFields
            }] // items
        }]; // add

this.myPanel.add(add);
this.myPanel.doLayout();

Thanks for any advice!

[chris24300]

There's no layout expert here?

I want to do what's done here in the calendar example, in editing and event
http://dev.sencha.com/deploy/ext-3.3...dar/index.html

[willjohnathan]

not sure i am following what you want. Is it something that is demonstrated in this example:
http://dev.sencha.com/deploy/ext-3.3...eck-radio.html