1. #1
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default [2.0rc1] more odd behavior of nested panels.

    [2.0rc1] more odd behavior of nested panels.


    OK,notice how stuff works on window.resize:

    issue #1:
    FF2 IE6
    Adding a border layout to a tab panel with no tabs results in a munged layout. window.resize fixes this.

    workaround:
    try:
    PHP Code:
                tabPanel.add(tab);
                
    tabPanel.setActiveTab(tab);
                
    tab.doLayout(); 
    seems to work in ie6,fx2



    issue#2
    IE6
    Grid headers in a grid nested in a tab panel do not show until:
    window.resize, modal dialog box.



    http://tdg-i.com/img/extjs/11_05_2007_09_06_AM.swf

    I could post code if you want but it would be a LOT to read though. not to mention i'm not the only one who's having this problem. I feel that this should be treated as a critical bug to be fixed before 2.0 goes production.

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    44
    Vote Rating
    0
    netsuo is on a distinguished road

      0  

    Default


    I actually have a lots of problems with tabpanels containing grids/dataview and/or forms.
    When i close a TapPanel, if i have other ones still opened, the next one that will show upon close will become empty, i'll have to do a "doLayout" to make it appear again.
    The problem is i can't use this workaround, because 1 time on 2, doing a "doLayout" breaks my layout (and there's really no reasons to) :/

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    yeah you're right. i've removed it from the post.

    this is not fun. :-\

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    try:
    PHP Code:
                tabPanel.add(tab);
                
    tabPanel.setActiveTab(tab);
                
    tab.doLayout(); 
    seems to work in ie6,fx2

  5. #5
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    44
    Vote Rating
    0
    netsuo is on a distinguished road

      0  

    Default


    On my part, I think i've found the problem: i was setting the same IDs on every tabpanel forms.. so i think the doLayout was lost with this :p

    I don't know if it can be your problem, but just take a look in this direction

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    It's my understanding that they get an ID by default. ext-cmp-<num>

  7. #7
    Ext User hunkybill's Avatar
    Join Date
    Mar 2007
    Location
    Montreal
    Posts
    67
    Vote Rating
    0
    hunkybill is on a distinguished road

      0  

    Default


    Hi,

    I add a tabPanel to my border layout center region and that works great. My tabPanel contains other panels, so naturally the configuration of tabs on the bottom for this panel makes sense. Unfortunately, the bottom tabs render but can barely be seen poking above the footer region. Seems obvious the panel size is not calculated properly prior to rendering. Window Resize fixes this. I uploaded two screenshots to show the results.

    With regards to this issue and your workaround suggestion of

    Code:
    tabPanel.add(tab);
    tabPanel.setActiveTab(tab);
    tab.doLayout();
    I tried it, and was hoping the setting the Active Tab would help, but it does not.. sigh.. shall await further updates to Ext2.0 in the hopes this gets resolved.

    I am curious if your layouts had this same problem? I use FF linux, but problem is consistent on most browsers I tried. I am loving this new layout container system...
    Attached Images

  8. #8
    Sencha User
    Join Date
    Nov 2007
    Posts
    5
    Vote Rating
    0
    markporter is on a distinguished road

      0  

    Default A solution to the messed up bottom tabs

    A solution to the messed up bottom tabs


    this was discussed here : http://extjs.com/forum/archive/index.php/t-14989.html

    I'm using a function for adding tabs that takes care of this:

    Code:
    addTab = function(tabPanel,config,ordinal){
        if (ordinal != undefined){
            tabPanel.insert(ordinal,config);   
        } else {
            tabPanel.add(config);
        }
       
        if (tabPanel.items.getCount() ==1){
            tabPanel.activate(config.id);
            tabPanel.syncSize();
            tabPanel.ownerCt.doLayout();
        }
    }

  9. #9
    Ext User hunkybill's Avatar
    Join Date
    Mar 2007
    Location
    Montreal
    Posts
    67
    Vote Rating
    0
    hunkybill is on a distinguished road

      0  

    Default


    Quote Originally Posted by markporter View Post
    this was discussed here : http://extjs.com/forum/archive/index.php/t-14989.html

    I'm using a function for adding tabs that takes care of this:

    Code:
    addTab = function(tabPanel,config,ordinal){
        if (ordinal != undefined){
            tabPanel.insert(ordinal,config);   
        } else {
            tabPanel.add(config);
        }
       
        if (tabPanel.items.getCount() ==1){
            tabPanel.activate(config.id);
            tabPanel.syncSize();
            tabPanel.ownerCt.doLayout();
        }
    }
    Bummer... that does not work in my case. I have carefully organized my setup to ensure I am not doing anything stoopid, and yet I still get bottom tabs partially rendering under my main south region.

    In short.. I have a center region defined as an Ext.TabPanel. I add to that a child component which is a TabPanel::BorderLayout object. Cool. Now that BorderLayout object consists of two panels for example, one for apples and one for oranges.

    I wish there were better docs on this issue. Jack Slocum's comments allude to the fact that we must do our own discovery on where, when and how to get these types of layouts to properly size. Well, I have tried pretty much all the standard methods from the docs and forums..

    Hopefully this bug just disappears when Ext2.0 is released.

  10. #10
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Try the following overrides:
    PHP Code:
    Ext.override(Ext.layout.ContainerLayout,{
        
    layout : function(){
            var 
    target this.container.getLayoutTarget();
            
    // this is to fit the body el to the wrapper again...
            
    if ( this.container.bwrap ) {
                var 
    w=this.container.bwrap.getBox().width;
                if(
    this.container.frame){
                    
    w-=this.container.getFrameWidth();
                }
                if(
    w!=target.getBox().width){
                    
    //alert("Resizing container from "+target.getBox().width+" to "+w);
                    
    target.setWidth(w);
                }
            }
            
    this.onLayout(this.containertarget);
            
        }
    });
    Ext.override(Ext.grid.GridView,{layout : function(){
        
    //alert("laying out grid");
        
    if(!this.mainBody){
            return; 
    // not rendered
        
    }
        var 
    this.grid;
        var 
    g.getGridEl(), cm this.cm,
                
    expandCol g.autoExpandColumn,
                
    gv this;

        var 
    csize c.getSize(true);
        
    //alert("old: "+csize.width+" new: "+g.getEl().getBox().width);
        
    csize.width=g.getEl().getBox().width;
        var 
    vw csize.width;
        
    //var gp=g.getEl();
        //vw=g.getEl().getBox().width;
        //alert("Width: "+vw+" Panel Width: "+g.getEl().getBox().width);

        
    if(!vw || !csize.height){ // display: none?
            
    return;
        }

        if(
    g.autoHeight){
            
    this.scroller.dom.style.overflow 'visible';
        }else{
            
    this.el.setSize(csize.widthcsize.height);

            var 
    hdHeight this.mainHd.getHeight();
            var 
    vh csize.height - (hdHeight);

            
    this.scroller.setSize(vwvh);
            
    this.innerHd.style.width = (vw)+'px';
        }
        if(
    this.forceFit){
            if(
    this.lastViewWidth != vw){
                
    this.fitColumns(falsefalse);
                
    this.lastViewWidth vw;
            }
        }else {
            
    this.autoExpand();
        }
        
    this.onLayout(vwvh);
    }
    });