Results 1 to 3 of 3

Thread: [2.2] Checkbox gets too much left padding in form panel in IE

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    243

    Default [2.2] Checkbox gets too much left padding in form panel in IE

    In the form examples replace anchoring.js with:
    PHP Code:
    Ext.onReady(function() {
        var 
    form = new Ext.form.FormPanel({
            
    baseCls'x-plain',
            
    labelWidth55,
            
    url:'save-form.php',
            
    defaultType'textfield',

            
    items: [{
                
    fieldLabel'Send To',
                
    name'to',
                
    anchor:'100%'  // anchor width by percentage
            
    },{
                
    fieldLabel'Subject',
                
    name'subject',
                
    anchor'100%'  // anchor width by percentage
            
    },{
            
    fieldLabel'checkbox',
            
    xtype"checkbox",
            
    anchor"0%"
        
    },{
                
    xtype'textarea',
                
    hideLabeltrue,
                
    name'msg',
                
    anchor'100% -53'  // anchor width by percentage and height by raw adjustment
            
    }]
        });

        var 
    window = new Ext.Window({
            
    title'Resize Me',
            
    width500,
            
    height:300,
            
    minWidth300,
            
    minHeight200,
            
    layout'fit',
            
    plain:true,
            
    bodyStyle:'padding:5px;',
            
    buttonAlign:'center',
            
    itemsform,

            
    buttons: [{
                
    text'Send'
            
    },{
                
    text'Cancel'
            
    }]
        });

        
    window.show();
    }); 
    The checkbox just sits in the middle of the form not aligned to the far left (which is how it is rendered in firefox). A workaround I initially found was:

    PHP Code:
    Ext.override(Ext.layout.FormLayout, {
            
    setContainer : function(ct){
            
    Ext.layout.FormLayout.superclass.setContainer.call(thisct);

            if(
    ct.labelAlign){
                
    ct.addClass('x-form-label-'+ct.labelAlign);
            }

            if(
    ct.hideLabels){
                
    this.labelStyle "display:none";
                
    this.elementStyle "padding-left:0;";
                
    this.labelAdjust 0;
            }else{
                
    this.labelSeparator ct.labelSeparator || this.labelSeparator;
                
    ct.labelWidth ct.labelWidth || 100;
                if(
    typeof ct.labelWidth == 'number'){
                    var 
    pad = (typeof ct.labelPad == 'number' ct.labelPad 5);
                    
    this.labelAdjust ct.labelWidth+pad;
                    
    this.labelStyle "width:"+ct.labelWidth+"px;";
                    
    this.elementStyle "padding-left:0";
                }
                if(
    ct.labelAlign == 'top'){
                    
    this.labelStyle "width:auto;";
                    
    this.labelAdjust 0;
                    
    this.elementStyle "padding-left:0;";
                }
            }

            if(!
    this.fieldTpl){
                            var 
    = new Ext.Template(
                    
    '<div class="x-form-item {5}" tabIndex="-1">',
                        
    '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',
                        
    '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
                        
    '</div><div class="{6}"></div>',
                    
    '</div>'
                
    );
                
    t.disableFormats true;
                
    t.compile();
                
    Ext.layout.FormLayout.prototype.fieldTpl t;
            }
        }
    }); 
    The only bit being changed was the: this.elementStyle = "padding-left:0"; which used to be the ct.labelWidth+pad. This didn't seem to impact anything else, but I'm sure there's a better fix!

  2. #2

    Default

    When a check box is placed into a form layout container, the resize element for the check box is the div the container creates for the control "<div class="x-form-element" id="x-form-el-{0}" style="{3}">". When applying the width, it substitutes from the width you want the summed value of the left and right padding. That's why, when you set the padding-left to 0, it sets the right width for the check box and it displays it correctly.

    I'm egger to find the right solution for this. My solution was:

    Code:
    Ext.override(Ext.form.Checkbox, {
        getResizeEl : function(){
            if(!this.resizeEl){
                this.resizeEl = this.wrap;
            }
            return this.resizeEl;
        }
    });
    instead of

    Code:
    getResizeEl : function(){
            if(!this.resizeEl){
                this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
            }
            return this.resizeEl;
        }

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Posts
    243

    Default

    Bump - any news on official fix for this?

Posting Permissions

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