PDA

View Full Version : help with layout of hbox containing three checkboxes



tr888
6 May 2010, 5:13 AM
I am a little in the dark about how to center three checkboxes across the top of my form so that they remain centered when the form is resized:


[ ] Prose [ ] Verse [ ] Gloss


I placed them inside a container, PVGContainer, and in the Designer gave the container "hbox" layout (a mistake?) and was planning to use the following stylesheet to center the contents of PVGContainer:



#PVGContainer { padding-top : 1em; padding-bottom: 1em;
margin-left: auto; margin-right: auto;
text-align: center;
}
Here is how they were created in the designer:


{
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
autoHeight: true,
id: 'PVGContainer',
items: [
{
xtype: 'checkbox',
fieldLabel: 'Label',
boxLabel: 'Prose',
checked: true,
id: 'PVG_Prose'
},
{
xtype: 'checkbox',
fieldLabel: 'Label',
boxLabel: 'Verse',
checked: true,
id: 'PVG_Verse'
},
{
xtype: 'checkbox',
fieldLabel: 'Label',
boxLabel: 'Gloss',
checked: true,
id: 'PVG_Gloss'
}
]
}In the markup generated by ExtJS (as displayed by Firebug) the three checkboxes get wrapped in an autogenerated div (id=x-gen63) and Ext assigns each checkbox an absolute position relative to that wrapper:



<div id ="PVGContainer" class="x-box-layout-ct" style="height: auto;" >
<div id="ext-gen63" class="x-box-inner" style=" width: 466px; height: 18px;">
<div id="ext-gen64" class="x-form-check-wrap x-box-item" style="left: 0px; top: 0px;">
<div id="ext-gen66" class="x-form-check-wrap x-box-item" style="left: 44px; top: 0px;">
<div id="ext-gen68" class="x-form-check-wrap x-box-item" style="left: 88px; top: 0px;" >
</div >
</div >
What layout settings must be used in the Designer to get these checkboxes all on the same line horizontally and then centered inside my PVGContainer?

Thanks for the help.

tr888
7 May 2010, 4:40 AM
Works in new version downloaded this morning. :)