PDA

View Full Version : Checkbox/RadioButton Layout 3.0.0 - 3.2.0



ajmPal
4 Aug 2010, 4:24 AM
I have a Panel that contains multiple checkbox and radioButtons, when I upgraded from ext-3.0.0 to ext-3.2.0 the layout of all the boxLabels for radioButtons and checkboxes changed from the right side of each items to below and to the left of each item, any idea how to change it back ?
Here's some code:


var p =- new ExtPanel({
title: 'General Query Terms', id: 'genCombinedPanel', collapsible: false, collapsed: false, renderTo: 'combinedPanel', width: 1000, height: 870, hideMode: 'offsets',
items:[
{layout:'form', columnWidth: 1, border: false, bodyBorder: false, hideBorders: true,
items:[
{},
{xtype: 'textfield', id: 'genText', fieldLabel: 'Text Query',width: 800, style:'margin-top: 5px;'},
{layout:'form', columnWidth: 1, border: false, bodyBorder: false, hideBorders: true,
items:[
{layout:'form', columnWidth: .4, border: false, bodyBorder: false, hideBorders: true,
items:[
{xtype: 'fieldset', border: true, collapsible: false, autoWidth: true, autoHeight:true, title: 'Date',
items:[
{xtype: 'fieldset', border: true, collapsible: false, autoWidth: true, autoHeight:true, layout:'column', columnWdth: 2, hideMode: 'offsets', style: 'margin-left: 20px;',
items:[
{xtype:'radio', name:'dateType', id: 'doi', boxLabel:'DOI', inputValue: 'doi', checked: true},
{xtype:'radio', name:'dateType', id: 'load', boxLabel:'Load Date', inputValue: 'load'},
{xtype:'radio', name:'dateType', id: 'all', boxLabel:'Entire Database', inputValue: ''}
]
}
]
},
{xtype: 'fieldset', border: true, collapsible: false, autoWidth: true, autoHeight:true, width: 600, layout: 'column', columnWidth: 1, title: 'Type',
items:[
{xtype: 'fieldset', border: true, collapsible: false, autoWidth: true, autoHeight:true, layout:'column', clayoutConfig:[columnCount: 3}, hideMode: 'offsets', style: 'margin-left: 30px;',
items:[
{xtype:'checkbox', name:'vendorA', id: 'vendorA', boxLabel:'Vendor A', checked:true},
{xtype:'checkbox', name:'vendorB', id: 'vendorB', boxLabel:'Vendor B', checked:true},
{xtype:'checkbox', name:'vendorC', id: 'vendorC', boxLabel:'Vendor C', checked:true}
]
},
{xtype: 'fieldset', border: true, collapsible: false, autoWidth: true, autoHeight:true, layout:'column', clayoutConfig:[columnCount: 2}, hideMode: 'offsets', style: 'margin-left: 30px;',
items:[
{xtype:'checkbox', name:'vendorD', id: 'vendorA', boxLabel:'Vendor A', checked:true},
{xtype:'checkbox', name:'vendorE', id: 'vendorB', boxLabel:'Vendor B', checked:true}
]
}
]
}
]
}
});

Condor
4 Aug 2010, 4:29 AM
That is because you don't leave enough room for the boxLabel, so it gets pushed down a line.

I see lots of autoWidth:true in your code. Those hardly ever work! Instead, since your fieldsets are inside a form layout, I would recommend using an anchor (e.g. anchor:'-20').

ajmPal
4 Aug 2010, 5:17 AM
Anchor didn't seem to make any difference.
Why is there such a big difference in the css between 3.0.0 and 3.2.0 ?

Condor
4 Aug 2010, 5:44 AM
1. Your layout is overnested.
2. You are using panels instead of containers.
3. There are lots of typos in your code (columnWdth, clayoutConfig etc.).

Can you repost your code after you have fixed these things?

ajmPal
4 Aug 2010, 6:00 AM
I only included part of the code, I have a huge form and it's on a closed system