1. #1
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

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

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


    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"

    Code:
    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
    Last edited by elnove; 3 Aug 2008 at 12:26 PM. Reason: solved

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    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:
    Code:
    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 
            }
         });
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  4. #4
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjlecomte View Post
    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

  5. #5
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by elnove View Post
    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.

  6. #6
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Default


    Thanks Doung,

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

    can you help me with that please.

    El

  7. #7
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User elnove's Avatar
    Join Date
    Nov 2007
    Location
    Canada
    Posts
    110
    Vote Rating
    0
    elnove is on a distinguished road

      0  

    Default


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

    next time the beer is on me

    El

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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.

Thread Participants: 2