Results 1 to 2 of 2

Thread: help with layout of hbox containing three checkboxes

  1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    25

    Default help with layout of hbox containing three checkboxes

    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:

    Code:
    #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:

    Code:
    {
                    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:

    Code:
    <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.
    Last edited by tr888; 6 May 2010 at 5:14 AM. Reason: typo

  2. #2
    Ext User
    Join Date
    Mar 2010
    Posts
    25

    Default

    Works in new version downloaded this morning.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •