[ExtJs 2.1] Tab Panel with shared panel won't work [SOLVED]

[elnove]

Hi,
I'm trying to build a TabPanel where each tab have a border layout.
The 'west' region holds a grid panel and have diffrent grid for each tab, but the 'center' region holds a panel that should hold forms that are shared between all panels (some forms are being added dynamically).

My problem is that I can only see the shared panel in the last tab on the list and in every other tab is is empty.

How can I share the same panel all over my tabs ?

Here is the code, the Panel I need to share across all tabs is "indexesTempForms"

Stockato.widgets.TradeTabs=function(){
    var formsPanelHeight=425;
    //this.formsArray=new Array();
    
    this.indexGrid=new Stockato.widgets.OptionsGrid(1);
    this.commoditiesGrid=new Stockato.widgets.OptionsGrid(2);
    this.currencyGrid=new Stockato.widgets.OptionsGrid(3);
    this.favoritesGrid=new Stockato.widgets.OptionsGrid(-1,true);
    this.userOptionsGrid=new Stockato.widgets.UserOptionsGrid();
    
    //temp forms container
    this.indexesTempForms=new Ext.Panel({
        autoScroll:true,
        height:formsPanelHeight    
    });
    
    
    /**********************************************
    / TABS
    /*********************************************/
    //indexes
    this.indexTab=new Ext.Panel({
        title:'Indexes',
        layout:'border',
        items:[{
            region: 'west',
            collapsible: false,
            margins: '3 3 3 3',
            cmargins: '0 0 0 0',
            width:440,
            split: false,
            items:[this.indexGrid]
        },{
            region: 'center',
            collapsible: false,
            margins: '3 3 3 3',
            cmargins: '0 0 0 0',
            split: false,
            items:[this.indexesTempForms]
        }]
    });
    
    //commodities
    this.commoditiesTab=new Ext.Panel({
        title:'Commodities',
        layout:'border',
        items:[{
            region: 'west',
            collapsible: false,
            margins: '3 3 3 3',
            cmargins: '0 0 0 0',
            width:440,
            split: false,
            items:[this.commoditiesGrid]
        },{
            region: 'center',
            collapsible: false,
            margins: '3 3 3 3',
            cmargins: '0 0 0 0',
            split: false,
            items:[this.indexesTempForms]
        }]
    });
    
   
    Stockato.widgets.TradeTabs.superclass.constructor.call(this, {
        //renderTo:'tradeTabs',
        //width:783,
        height:425,
        activeTab:0,
        cls:'trd',
        border:false,
        frame:false,
        items:[this.indexTab,this.commoditiesTab]
    })

thanks in advanced,

El

[mjlecomte]

I suspect your problem is because that shared panel has an unique id associated with it, but you're sticking it into multiple locations.

I think you're overnesting those grids into the tab panels also.

[hendricd]

Just to add: a Component (or subclass) can only belong to one container at a time. Consider removing your formPanel collection from the previous tab and add it to the center region of the new tab using the beforetabchange event.

It's a bit 'expensive' (but you don't have to rebuild the forms) and you may need to refactor a bit, but something like this:

Stockato.widgets.TradeTabs.on({
     beforetabchange : function (tabs, newTab, prevTab){
        
           newTab.layout.region['center'].add (
               prevTab.layout.region['center'].remove(this.indexesTempForms, false) ); //no destruction
            newTab.layout.region['center'].doLayout();  //if tabPanels layoutOnTabChange == false 
        }
     });

[elnove]

I suspect your problem is because that shared panel has an unique id associated with it, but you're sticking it into multiple locations.

I think you're overnesting those grids into the tab panels also.

thanks for your replay.

I don't have a unique ID for the shared component, its instance name in the code is "this.indexesTempForms". that the one that should hold the same content across the tabs, while the grids are changing (the holds different data).

El

[mjlecomte]

thanks for your replay.

I don't have a unique ID for the shared component, its instance name in the code is "this.indexesTempForms". that the one that should hold the same content across the tabs, while the grids are changing (the holds different data).

El

What makes you think the ID is not unique? Inspect in firebug and tell me what the ID is.

Saying another way, you only create one instance of the component correct? Yet you're trying to have that one instance move to different locations in your DOM. So as Doug was eluding to, seems like you need to remove it from one location so it can then be added to another location.

Have you thought to modify the layout a bit where the shared panel is static, say in a east region, while the center region is tabs with the various grids? You could make that east panel collapsible, etc.

[elnove]

Thanks Doung,

I'm trying that, but I getting: "newTab.layout.region['center'] is undefined"

can you help me with that please.

El

[elnove]

Hi MJ,
I understand that in the DOM each instance is recieving its own unique ID, what I was trying to say was, that I ddin't gave it any ID explicitly.

[elnove]

THANK YOU MJ !!!!
thats finaly worked for me (forgot the set the "autoDestroy" to "false" ).

next time the beer is on me

El

[mjlecomte]

Not sure what you finally ended up with, but don't forget ext assigns an id automatically regardless if you specify want explicitly or not. The id config just gives you the ability to specify the id yourself, otherwise ext autogenerates one for you.