1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    13
    Vote Rating
    0
    pete7au is on a distinguished road

      0  

    Default FormPanel "autoScroll:true" - horizontal scrollbar *always* appearing!

    FormPanel "autoScroll:true" - horizontal scrollbar *always* appearing!


    Anyone know why the horizontal scrollbar is appearing unnecessarily?

    See attachment "scrollbars.jpg" to see what the below example code does.
    Code:
    Ext.onReady(function(){
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            {
                region: 'north',
                height: 50
            },
            {
                region: 'south',
                height: 50
            },
            {
                region: 'east',
                width: 50
            },
            {
                region: 'west',
                width: 50
            },
            {
                region: 'center',
                layout: 'fit',
                items: [
                {
                    layout: 'border',
                    items: [
                    {
                        region: 'north',
                        height: 50
                    },
                    {
                        region: 'south',
                        height: 50
                    },
                    {
                        region: 'east',
                        width: 50
                    },
                    {
                        region: 'west',
                        width: 50
                    },
                    {
                        region: 'center',
                        layout: 'fit',
                        items: [
                        {
                            xtype: 'form',
                            autoScroll: true,
                            items: [
                            {
                                xtype: 'fieldset',
                                title: 'Test Fieldset',
                                items: [{
                                    xtype: 'checkboxgroup',
                                    fieldLabel: 'Test Checkboxgroup',
                                    columns: 1,
                                    items: [
                                    {
                                        xtype: 'radio',
                                        boxLabel: 'Test Radio 1'
                                    },
                                    {
                                        xtype: 'radio',
                                        boxLabel: 'Test Radio 1'
                                    },
                                    {
                                        xtype: 'radio',
                                        boxLabel: 'Test Radio 1'
                                    },
                                    {
                                        xtype: 'radio',
                                        boxLabel: 'Test Radio 1'
                                    }
                                    ]
                                }
                                ]
                            }
                            ]
                        }
                        ]
                    }
                    ]
                }
                ]
            }
            ]
        });
    });
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Overnested. Sort it out!

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    13
    Vote Rating
    0
    pete7au is on a distinguished road

      0  

    Default


    "Overnested" to highlight the problem which is a valid use.

    For everyone else who may encounter this issue here is one solution I just found.

    Encapsulate the FormPanel in a Panel with autoScroll (and remove autoScroll from the FormPanel).
    Code:
    Ext.onReady(function(){
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            {
                region: 'north',
                height: 50
            },
            {
                region: 'south',
                height: 50
            },
            {
                region: 'east',
                width: 50
            },
            {
                region: 'west',
                width: 50
            },
            {
                region: 'center',
                layout: 'fit',
                items: [
                {
                    layout: 'border',
                    items: [
                    {
                        region: 'north',
                        height: 50
                    },
                    {
                        region: 'south',
                        height: 50
                    },
                    {
                        region: 'east',
                        width: 50
                    },
                    {
                        region: 'west',
                        width: 50
                    },
                    {
                        region: 'center',
                        layout: 'fit',
                        items: [
                        {
                            xtype: 'panel',
                            autoScroll: true,
                            items: [
                              {
                                xtype: 'form',
                                //autoScroll: true,
                                items: [
                                {
                                    xtype: 'fieldset',
                                    title: 'Test Fieldset',
                                    items: [{
                                        xtype: 'checkboxgroup',
                                        fieldLabel: 'Test Checkboxgroup',
                                        columns: 1,
                                        items: [
                                        {
                                            xtype: 'radio',
                                            boxLabel: 'Test Radio 1'
                                        },
                                        {
                                            xtype: 'radio',
                                            boxLabel: 'Test Radio 1'
                                        },
                                        {
                                            xtype: 'radio',
                                            boxLabel: 'Test Radio 1'
                                        },
                                        {
                                            xtype: 'radio',
                                            boxLabel: 'Test Radio 1'
                                        }
                                        ]
                                    }
                                    ]
                                }
                                ]
                              }
                            ]
                        }
                        ]
                    }
                    ]
                }
                ]
            }
            ]
        });
    });

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    No, it's just too mad to even look at.

    A center which is a fit which contains a border who's center is a fit which contains a form which...

    You can't be serious!

    Make the center a form panel.

  5. #5
    Ext User
    Join Date
    Sep 2010
    Posts
    13
    Vote Rating
    0
    pete7au is on a distinguished road

      0  

    Default


    Mad to look at this way yes, in code generating the ui no.

    You seemed to follow what I was doing easily enough.

    Deadly serious.

    If it was a form panel then I couldn't lay it out like a border layout now could I

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by pete7au View Post
    If it was a form panel then I couldn't lay it out like a border layout now could I
    What on EARTH would give you that idea?

  7. #7
    Ext User
    Join Date
    Sep 2010
    Posts
    13
    Vote Rating
    0
    pete7au is on a distinguished road

      0  

    Default


    So ... form panel with border layout with fieldset in the center region (which scrolls vertically) & buttons in the south region?

  8. #8
    Ext User
    Join Date
    Sep 2010
    Posts
    13
    Vote Rating
    0
    pete7au is on a distinguished road

      0  

    Default


    FormPanel with border layout works but you will still need to wrap your fieldset(s) in an outer panel to fix the horizontal scrollbar issue as documented above, i.e.
    Code:
            {
                region: 'center',
                layout: 'fit',
                items: [
                {
                    xtype: 'panel',
                    autoScroll: true,
                    items: [
                    {
                        ref: 'fieldsetsgohere'
                    }]
                }]
            }

Similar Threads

  1. Replies: 4
    Last Post: 30 Sep 2009, 11:07 PM
  2. Replies: 5
    Last Post: 5 Jun 2009, 10:44 AM
  3. Replies: 0
    Last Post: 14 Oct 2008, 4:34 PM
  4. Get scrollable element created by "autoScroll: true"
    By iDave in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 18 Aug 2008, 5:24 AM

Thread Participants: 1

Tags for this Thread