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,499
    Vote Rating
    46
    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,499
    Vote Rating
    46
    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,499
    Vote Rating
    46
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi