1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    80
    Vote Rating
    0
    ajmPal is on a distinguished road

      0  

    Default Checkbox/RadioButton Layout 3.0.0 - 3.2.0

    Checkbox/RadioButton Layout 3.0.0 - 3.2.0


    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:
    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}
                            ]
                        }
                     ]
                  }
             ]
          }
    });

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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').

  3. #3
    Sencha User
    Join Date
    Jul 2008
    Posts
    80
    Vote Rating
    0
    ajmPal is on a distinguished road

      0  

    Default


    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 ?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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?

  5. #5
    Sencha User
    Join Date
    Jul 2008
    Posts
    80
    Vote Rating
    0
    ajmPal is on a distinguished road

      0  

    Default


    I only included part of the code, I have a huge form and it's on a closed system

Similar Threads

  1. Checkbox in table layout
    By xpurpur in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 10 Nov 2009, 11:28 AM
  2. Checkbox - Layout
    By Michi_72 in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 25 May 2009, 5:50 AM
  3. checkbox/radiobutton boxlabel not getting hide when hidden:true
    By vikaskapoor in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 4 May 2009, 4:20 AM
  4. Menu with checkBox and radiobutton
    By pinext in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 12 Nov 2007, 10:15 AM

Thread Participants: 1