[CLOSED] TabStrip / TabPanel When adding new panel (IFrame) they stop loading another tab.

[AABR]

Hey,
I have a Tab Strip which on page load has a default tab which is uncloseable this tab has a list of links. Upon clicking a link i call addTab() which adds a tab (Tab.A) to the control everything is fine the page takes (5-10sec loaded) if I click a diff link i call addTab() which adds a tab (Tab.B) to the control and focus is set to Tab.B. If i click on (Tab.A) I notice the page stopped loading images failed etc... the scroll location has been reset. but (Tab.B) loaded fine.

each tab i add has a unique ID/ unique URL and i'm auto loading mode is set to 'iframe'

I am using the latest version of Ext.net from the SVN as of last week.

this is the listener FN i'm using for the links

var addNewTab = function(tabId, autoLoadObject, stripId, stripTabTip, stripTitle) {
     
    var tab = getTabStrip().getComponent(stripId);
    if (!tab) {
        window.Ext.net.ResourceMgr.destroyCmp(tabId);
        var pnl = new Ext.Panel({
                id: tabId,
                xtype: "panel",
                layout: "fit",
                autoLoad: autoLoadObject,
                border: false,
                header: false,
                listeners: {
                    beforetabclose: {
                        fn: onBeforeTabClose
                    }
                }
            }
        );
        getPlaceHolder().addAndDoLayout(pnl);
        tab = getTabStrip().add({
            id: stripId,
            actionItem: tabId,
            title: stripTitle,
            tabTip: stripTabTip,
            closable: true,
            ph: pnl
        });
        pnl.tb = tab;
    }
    getTabStrip().setActiveTab(tab); <- possible issue?
};

FYI - I'm a premium member but waiting for my credentials from my colleague

Any Idea?

[Daniil]

Hi,

Please set up LayoutOnTabChange="true" for the TabPanel or HideMode="Offsets" for the tabs.

[AABR]

Hey Danii,
The Parent Panel (Which holds the tab items) doesn't have the property LayoutOnTabChange is this because i'm not using the ext:TabPanel im using the ext:Panel? I'm using the ext:Panel because i'm using the tab strips in conjunction.

so basically it looks like your tab strip example

<ext:Panel 
            runat="server" 
            Height="185" 
            Width="350" 
            Layout="card" 
            ActiveIndex="0"
            DefaultBorder="false"
            DefaultPadding="5">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Icon="Database" />
                        <ext:Button runat="server" Icon="Disk" />
                        <ext:ToolbarFill runat="server" />
                        <ext:TabStrip runat="server">
                            <Items>
                                <ext:TabStripItem ActionItemID="pnlSummary" runat="server" Title="Summary" />
                                <ext:TabStripItem ActionItemID="pnlData" runat="server" Title="Data" />
                            </Items>
                        </ext:TabStrip>
                        <ext:ToolbarSeparator runat="server" />
                        <ext:Button runat="server" Icon="Key" />
                        <ext:Button runat="server" Icon="Help" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Panel ID="pnlSummary" runat="server" Html="Summary" Header="false" />
                <ext:Panel ID="pnlData" runat="server" Html="Data" Header="false" />
            </Items>
        </ext:Panel>

[Daniil]

Then please add HideMode="Offsets" for the tabs.

[AABR]

Then please add HideMode="Offsets" for the tabs.

This didn't do the trick so i modified my listener which adds the tabs to now do this

var addNewTab = function(tabId, autoLoadObject, stripId, stripTabTip, stripTitle) {

    var tab = getTabStrip().getComponent(stripId);
    if (!tab) {
        window.Ext.net.ResourceMgr.destroyCmp(tabId);
        var pnl = new Ext.Panel({
            id: tabId,
            xtype: "panel",
            layout: "fit",
            autoLoad: autoLoadObject,
            border: false,
            header: false,
            listeners: {
                beforetabclose: {
                    fn: onBeforeTabClose
                }
            }
        }
        );

        getPlaceHolder().addAndDoLayout(pnl);
        
        tab = getTabStrip().add({
            id: stripId,
            actionItem: tabId,
            title: stripTitle,
            tabTip: stripTabTip,
            hideMode:'offsets',  <-- LIKE YOU SUGGESTED.
            closable: true,
            ph: pnl
        });
        pnl.tb = tab;
    }
    getTabStrip().setActiveTab(tab);
};

no change.

[Daniil]

I think it needs to add

hideMode:'offsets'

into a Panel's config, here:

new Ext.Panel({
    ...
    hideMode:'offsets'

[Vladimir]

You have to add hideMode for panel

[AABR]

I think it needs to add

hideMode:'offsets'

into a Panel's config, here:

new Ext.Panel({
    ...
    hideMode:'offsets'

This seemed to do the trick Thank you i have been banging my head for 3days trying to figure this out!


Danii & Vlad Thanks again!

Revised method

var addNewTab = function(tabId, autoLoadObject, stripId, stripTabTip, stripTitle) {

    var tab = getTabStrip().getComponent(stripId);
    if (!tab) {
        window.Ext.net.ResourceMgr.destroyCmp(tabId);
        var pnl = new Ext.Panel({
            id: tabId,
            xtype: "panel",
            layout: "fit",
            hideMode:'offsets',
            autoLoad: autoLoadObject,
            border: false,
            header: false,
            hideMode: 'offsets',
            listeners: {
                beforetabclose: {
                    fn: onBeforeTabClose
                }
            }
        }
        );

        getPlaceHolder().addAndDoLayout(pnl);
        
        tab = getTabStrip().add({
            id: stripId,
            actionItem: tabId,
            title: stripTitle,
            tabTip: stripTabTip,
            hideMode:'offsets',
            closable: true,
            ph: pnl
        });
        pnl.tb = tab;
    }
    getTabStrip().setActiveTab(tab);
};

[AABR]

Can mark this as resolved that fixed my issue adding it to the panel/strip did the charm.


Thanks again!

[Daniil]

We always glad to help.

By the way, thank for the posting the last working code. It can help someone in the future.