Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default [2.1][FIXED] Checkbox with no boxLabel aligns badly within form

    [2.1][FIXED] Checkbox with no boxLabel aligns badly within form


    Example showing problem:
    PHP Code:
            var form = function() {
                return {
                    
    init : function() {
                        var 
    viewport = new Ext.Viewport({
                            
    layout"border",
                            
    items:
                                    new 
    Ext.form.FormPanel({
                                        
    region"center",
                                              
    framefalse,
                                        
    bodyStyle"padding:5px 10px 0 10px;",
                                        
    autoHeighttrue,
                                        
    frametrue,
                                        
    id"form-ctr",
                                        
    items: [{
                                            
    xtype"fieldset",
                                            
    layout"table",
                                            
    height400,
                                            
    layoutConfig: {columns2},
                                            
    items: [{
                                                
    layout"form",
                                                
    items: [{
                                                    
    xtype"textfield",
                                                    
    fieldLabel"Text Area",
                                                    
    anchor"98%"
                                                
    }]
                                            },{
                                                
    layout"form",
                                                
    items: [{
                                                    
    xtype"textfield",
                                                    
    fieldLabel"Text Field",
                                                    
    anchor"98%"
                                                
    }]
                                            },{
                                                
    layout"form",
                                                
    items: [{
                                                    
    xtype"textfield",
                                                    
    fieldLabel"Text Field",
                                                    
    anchor"98%"
                                                
    }]
                                            },{
                                                
    layout"form",
                                                
    items: [{
                                                    
    xtype"textfield",
                                                    
    fieldLabel"Text Field",
                                                    
    anchor"98%"
                                                
    }]
                                            },{
                                                
    layout"form",
                                                
    items: [{
                                                    
    xtype"textfield",
                                                    
    fieldLabel"Text Field",
                                                    
    anchor"98%"
                                                
    }]
                                            },{
                                                
    layout"form",
                                                
    items: [{
                                                    
    xtype"checkbox",
                                                    
    fieldLabel"Check Box",
                                                    
    anchor"0%"
                                                
    }]
                                            }]
                                        }]
                                    })
                                
                        });
                    }
                }
            }();
            
    Ext.onReady(function() {
                
    form.init();
            }, 
    form); 
    The checkbox is misaligned, and is wrongly given by a left:-8px (given by the onResize)

    My proposed fix is to only perform the alignTo if there is no boxLabel and no fieldLabel:
    PHP Code:
    Ext.override(Ext.form.Checkbox, {
        
    onResize : function(){
            
    Ext.form.Checkbox.superclass.onResize.apply(thisarguments);
            if (!
    this.boxLabel && !this.fieldLabel) {
                
    this.el.alignTo(this.wrap'c-c');
            }
        }
    }); 

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Updated in SVN, thanks.

  3. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    110
    Vote Rating
    0
    Rothariger is on a distinguished road

      0  

    Default


    thanks... it help me a lot!

  4. #4
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275
    Vote Rating
    0
    Stripeman is on a distinguished road

      0  

    Default


    I think this issue is also in the 3.x release.
    No matter where i put this override.. it doesnt work when i dont specify a fieldLabel. Yes I am using 'anchor: "0%"'

    Where am I to put the code?:
    PHP Code:
      Ext.override(Ext.form.Checkbox, {
            
    onResize : function(){
                
    Ext.form.Checkbox.superclass.onResize.apply(thisarguments);
                if (!
    this.boxLabel && !this.fieldLabel) {
                    
    this.el.alignTo(this.wrap'c-c');
                }
            }
        }); 

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    This has been added for 3.x as well.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User
    Join Date
    May 2009
    Posts
    32
    Vote Rating
    0
    casic has a little shameless behaviour in the past

      0  

    Default check box alignment

    check box alignment


    i jus have a box with two checkboxes.
    there is no labels for fields checkbox , but there is a boxLabel beside the box .
    The fields is centered and i want to be left aligned.
    Please HELP !!

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Location
    Spain
    Posts
    10
    Vote Rating
    -1
    tenBoxelulley is an unknown quantity at this point

      0  

    Default 2 1FIXED Checkbox with no boxLabel aligns badly within form

    2 1FIXED Checkbox with no boxLabel aligns badly within form


    i have tried it with IE 6.0 & 7.0 as well as google chrome...

    so i guess no one wlse has this problem then?