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

      0  

    Default fitToForm in a TabPanelItem in a Region

    fitToForm in a TabPanelItem in a Region


    I have a strange problem when a form is too deep for a page. Obviously, I want scrollbars so that the user can access the form.

    But the width seems to be explicitly set too wide by the fitToForm algorithm:

    Here is what it's like with the region expaned enough to fit the form's depth:



    Then when I pull the splitter down a little:

    You can see the width which must be set as an explicit CSS style on the element does not take the presence of the vertical scrollbar into account.



    If I go into DOM Inspector and knock 20px off the width of the yui-ext-tabitembody element, it's fine, but move the splitter again, and the width jumps back up.

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

      0  

    Default


    This fixes it for me in ContentPanel:

    Code:
        setSize : function(width, height){
            if(this.fitToFrame){
                var size = this.adjustForComponents(width, height);
                this.resizeEl.setSize("auto", size.height);
            }
        },

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I added:

    this.resizeEl.setSize(this.autoWidth ? 'auto' : size.width, size.height);

    So autoWidth + fitToFrame will do what you have described.

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

      0  

    Default


    Are you sure that's right?

    I think that fitToFrame means that it must use width:"auto". I mean that's what auto width does on a div: fits the width to the container's width. Height must be calculated to fit the frame, but width should be auto.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default


    Actually, this is happening in spots of my code as well. My best guess so far is that autoWidth is in fact working. It's just not taking into account that it needs to make itself smaller to make up for the fact that a vertical scrollbar exists.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Width auto only expands on some elements. For example, an iframe needs to be fit (width and height) because auto width won't expand.

    With fitToFrame on, ideally the child would have the overflow auto, not the parent (the region). This would prevent the scrollbar problem you are having.

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

      0  

    Default


    Yes, it's the ContentPanel's div element that's being set to the width of the region. The Region may display scroll bars if the ContentPanel's div is too deep.

    Perhaps the fitToFrame method could see if the ContentPanel is an iframe or a div, and always use width:"auto" if it's a div?

    @jbowman, Jack means he just added the autoWidth config option to his development code. It's not in .33RC2.

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    If the container region is handling scrolling then the child content panel should not be fitToFrame, it should be auto sized (height too). There's nothing gained by fitting a child content panel to a parent region that is overflow auto. Make sense?

    Think of it as two separate options:

    LayoutRegion: autoScroll: true. All children (ContentPanels) should be fitToFrame: false. Obviously exceptions can be made, but this is the case in general. This model works well when the region just contains normal markup and you always want overflow to scroll on every panel.

    LayoutRegion: autoScroll:false. Children (ContentPanels) manage their own scrolling (overflow:auto) and require fitToFrame: true on the ones that will scroll. Not all children have to scroll. This is more flexible and is better when the region may contain a GridPanel or something that should manage it's on scroll.

    This should probably be in a doc somewhere as even I get it messed up all the time.

Similar Threads

  1. Fires in Ext.TabPanelItem
    By cebola in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 27 Mar 2007, 7:42 AM
  2. Alpha 2 FitToForm Bug
    By RoadSpike in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 5 Mar 2007, 10:38 AM
  3. unwanted region space in north region
    By rojar in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 20 Feb 2007, 6:32 AM
  4. Bug or not with TabPanelItem
    By reignman in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 5 Feb 2007, 7:17 AM
  5. close a TabPanelItem
    By punitshah in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 25 Jan 2007, 12:10 AM

Thread Participants: 2