Results 1 to 4 of 4

Thread: hbox and form issue in IE6

  1. #1

    Default hbox and form issue in IE6

    Hi,

    Using Ext 3.0.0
    I have an issue when using hbox layout and a form in IE 6, form field are hidden :

    PHP Code:
    var window = new Ext.Window({
                            
    title        'test',
                            
    width        500,
                            
    height       400,
                            
    layout       'hbox',
                            
    layoutConfig : {
                                
    align 'stretch'
                                
    pack 'start'
                            
    },
                            
    frame        true,
                            
    bodyStyle    'padding: 6px',
                            
    items        : [{
                                        
    xtype 'panel',
                                        
    frame true,
                                        
    html  'this is a panel',
                                        
    flex  1
                                    
    }, new Ext.form.FormPanel({
                                                
    defaultType 'textfield',
                                                
    autoScroll  true,
                                                
    frame       true,
                                                
    flex        1,
                                                
    defaults    : {
                                                    
    msgTarget  'side'
                                                
    },
                                                
    bodyStyle   'padding: 5px',
                                                
    items       : [{
                                                            
    fieldLabel 'Name'
                                                        
    }, {
                                                            
    fieldLabel 'LastName'
                                                        
    }]
                                            })]
                        });
                
    window.show(); 
    In FF the form fields are visible although appearing with a scrollbar.

    If i change the layout to border everything shows fine.


    Cheers
    Attached Images Attached Images

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    IE6, the bane of our lives!

    I can't reproduce because I dont have IE6, but I think the default labelWidth could be making the full TextField items too wide. And the FormPanel is autoScroll: true, so you'd expect a scrollbar in that case.

    Try this:

    Code:
    new Ext.Window({
        title        : 'test',
        width        : 500,
        height       : 300,
        layout       : {
            type: 'hbox',
            align : 'stretch',
            pack : 'start'
        },
        bodyStyle    : 'padding: 6px',
        items        : [{
            xtype : 'panel',
            frame : true,
            html  : 'this is a panel',
            flex  : 1
          }, new Ext.form.FormPanel({
            defaultType : 'textfield',
            autoScroll  : true,
            labelWidth  : 90,
            flex        : 1,
            defaults    : {
                msgTarget  : 'side'
            },
            bodyStyle   : 'padding: 5px',
            items       : [{
                fieldLabel : 'Name'
            }, {
                fieldLabel : 'LastName'
            }]
        })]
    }).show();

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    But also, it would be normal, in a formlayout Container to anchor the widths of Fields, so adding

    Code:
    new Ext.Window({
        title        : 'test',
        width        : 500,
        height       : 300,
        layout       : {
            type: 'hbox',
            align : 'stretch',
            pack : 'start'
        },
        bodyStyle    : 'padding: 6px',
        items        : [{
            xtype : 'panel',
            frame : true,
            html  : 'this is a panel',
            flex  : 1
          }, new Ext.form.FormPanel({
            defaultType : 'textfield',
            autoScroll  : true,
            labelWidth  : 90,
            flex        : 1,
            defaults    : {
                msgTarget  : 'side',
                anchor: '-20' // allow space for error icon
            },
            bodyStyle   : 'padding: 5px',
            items       : [{
                fieldLabel : 'Name'
            }, {
                fieldLabel : 'LastName'
            }]
        })]
    }).show();

  4. #4

    Default

    yep the anchor did the trick, my fields where in fact inside a fieldset, with anchor defined in the fieldset but not above.
    When anchor is added also above the fieldset it works on IE6 like it was on other browsers...

    Cheers

Posting Permissions

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