[2.0rc1] more odd behavior of nested panels.

[jay@moduscreate.com]

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:

            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.

[netsuo]

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) :/

[jay@moduscreate.com]

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

this is not fun. :-\

[jay@moduscreate.com]

try:

            tabPanel.add(tab);
            tabPanel.setActiveTab(tab);
            tab.doLayout(); 

seems to work in ie6,fx2

[netsuo]

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

[jay@moduscreate.com]

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

[hunkybill]

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

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...

[markporter]

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:

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();
    }
}

[hunkybill]

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:

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.

[jay@moduscreate.com]

Try the following overrides:

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.container, target);
        
    }
});
Ext.override(Ext.grid.GridView,{layout : function(){
    //alert("laying out grid");
    if(!this.mainBody){
        return; // not rendered
    }
    var g = this.grid;
    var c = 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.width, csize.height);

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

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