Results 1 to 4 of 4

Thread: [SOLVED] Hbox Flex Reverses in IE

  1. #1
    Sencha User benmclendon's Avatar
    Join Date
    Jul 2008
    Location
    Valdosta, GA
    Posts
    70

    Default [SOLVED] Hbox Flex Reverses in IE

    With this code the left/right flex widths reverse in IE7 compared to FF3, e.g. I'm looking for a wider left side, narrower right side. I get that in F3 but in IE7 the left side is narrow and and the right side is wide.

    Is anyone else experiencing this?

    Code:
        var mdWindow = new Ext.Window({
            layout       : 'vbox',
            height       : 600,
            width        : 900,
            closable     : false,
            resizable    : false,
            plain        : false,
            border       : false,
            layoutConfig : {
                align : 'stretch'
            },
            defaults : {
                frame : false
            },
            items : [{
                title        : 'Concentrator',
                flex         : 1,
                layout       : 'hbox',
                plain        : true,
                layoutConfig : {
                    align : 'stretch'
                },
                items  : [{
                    flex   : 4,
                    items  : gridMaster
                }, {
                    flex       : 2,
                    items      : editMasterPanel
                }]
            }, {
                title        : 'History',
                flex         : 1,
                layout       : 'hbox',
                plain        : true,
                layoutConfig : {
                    align : 'stretch'
                },
                items  : [{
                    flex   : 4,
                    items  : gridDetail
                }, {
                    flex       : 2,
                    items      : editDetailPanel
                }]
            }]
        });
    Ben McLendon
    IT Manager and part-time: coder, photographer, designer, etc...
    Centos(rackspace), Apache, MySQL, PHP, ExtJS,OSX
    http://www.linkedin.com/in/benmclendon
    http://www.barneshc.com
    - http://www.audiedigitalmedia.com

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. You are overnesting. Give gridMaster, editMasterPanel, gridDetail and editDetailPanel a flex config option and use them directly in the layout.
    2. Give your panels an initial width (any width will do, e.g. width:0).

  3. #3
    Sencha User benmclendon's Avatar
    Join Date
    Jul 2008
    Location
    Valdosta, GA
    Posts
    70

    Default

    Perfect! That resolves the flex reversal. Now, if the flex would calculate the same widths in IE and FF... The second panel (right side) renders a bit narrower in FF causing scroll bars.

    Code:
        var mdWindow = new Ext.Window({
            layout       : 'vbox',
            height       : 600,
            width        : 900,
            closable     : false,
            resizable    : false,
            plain        : false,
            border       : false,
            layoutConfig : {
                align : 'stretch'
            },
            defaults : {
                frame : false
            },
            items : [{
                title        : 'Concentrator',
                flex         : 1,
                layout       : 'hbox',
                layoutConfig : {
                    align    : 'stretch'
                },
                items        : [gridMaster, editMasterPanel]
            }, {
                title        : 'History',
                flex         : 1,
                layout       : 'hbox',
                layoutConfig : {
                    align    : 'stretch'
                },
                items        : [gridDetail, editDetailPanel]
            }]
        });


    Ben McLendon
    IT Manager and part-time: coder, photographer, designer, etc...
    Centos(rackspace), Apache, MySQL, PHP, ExtJS,OSX
    http://www.linkedin.com/in/benmclendon
    http://www.barneshc.com
    - http://www.audiedigitalmedia.com

  4. #4
    Sencha User benmclendon's Avatar
    Join Date
    Jul 2008
    Location
    Valdosta, GA
    Posts
    70

    Default Solved!

    Set the left side element to:
    flex : 1

    Set the right side element to:

    flex : 0
    Width : 300
    Ben McLendon
    IT Manager and part-time: coder, photographer, designer, etc...
    Centos(rackspace), Apache, MySQL, PHP, ExtJS,OSX
    http://www.linkedin.com/in/benmclendon
    http://www.barneshc.com
    - http://www.audiedigitalmedia.com

Posting Permissions

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