PDA

View Full Version : How to generate a form in columns?



chris24300
27 Sep 2011, 10:55 AM
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
3 Oct 2011, 11:54 AM
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.1/examples/calendar/index.html

willjohnathan
3 Oct 2011, 12:09 PM
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.1/examples/form/check-radio.html