[CLOSED] Problem opening multiple tabpanels the same time.

[majunior]

No, I can't reproduce these pictures on my side.



Please clarify is this reproducible sometimes or every time?

It always happens, but on random pages.

Sometimes it appears on page 1 or 2 or 3

[Daniil]

Are there Viewport in the tabs? If so, LayoutOnTabChange="true" for TabPanel can solve the problem.

[majunior]

Are there Viewport in the tabs? If so, LayoutOnTabChange="true" for TabPanel can solve the problem.

I have a TabPanel within the ViewPort.
My summary follows the structure. With what I found interesting show for you.

<ext:ResourceManager ID="ResourceManager2" runat="server">
        <Listeners>
            <WindowResize Handler="if (Spot.active) {
                           Spot.hide();
                           Spot.show.defer(100, Spot, [Spot.activeCmp]);
                       }" />
        </Listeners>
    </ext:ResourceManager>
    <ext:Spotlight ID="Spot" runat="server" Animate="False" />
    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Split="true" MarginsSummary="5 5 0 5" MinHeight="73px" MaxHeight="73px">
                    <ext:Panel ID="Panel1" runat="server" MinHeight="73px" MaxHeight="73px" Height="73px"
                        Cls="CssExtPainelTop">
                        <Items>
                            <ext:TabPanel ID="tabMenus" runat="server" ActiveTabIndex="0" Cls="CssExtMenuTab">
                                <Listeners>
                                    <TabChange Handler="refreshTree(#{TreePanel1});" />
                                </Listeners>
                                <Items>
                                    <%--.
                                    .
                                    .--%>
                                </Items>
                            </ext:TabPanel>
                        </Items>
                    </ext:Panel>
                </North>
                <West Collapsible="true" Split="true" MinHeight="210px" MinWidth="130px" MaxWidth="500px"
                    MarginsSummary="0 0 5 5" CMarginsSummary="5 5 5 5" UseSplitTips="True" ExpandableSplitTip="Expantir painel">
                    <ext:Panel ID="pnlMenu" runat="server" Title="" MinHeight="200px" MinWidth="130px"
                        Cls="CssExtPainelMenuTreeView" MaxWidth="500px" Width="182px">
                        <Items>
                            <ext:RowLayout ID="RowLayout1" runat="server" Split="true">
                                <Rows>
                                    <ext:LayoutRow RowHeight="0.60">
                                        <ext:TreePanel ID="TreePanel1" runat="server" MinHeight="54px" UseArrows="true" AutoScroll="true"
                                            Animate="true" ContainerScroll="true" Cls="CssExtMenuTreeView" RootVisible="false">
                                             <%--.
                                    .
                                    .--%>
                                        </ext:TreePanel>
                                    </ext:LayoutRow>
                                    <ext:LayoutRow>
                                        <ext:Panel ID="pnl_Alert" runat="server" Title="Ajuda / Alarmes" Border="false" Frame="false"
                                            MinHeight="54px" Height="200px" Cls="CssExtPainelAlert">
                                            <Items>
                                                <ext:FitLayout ID="FitLayoutAlert" runat="server">
                                                    <Items>
                                                    </Items>
                                                </ext:FitLayout>
                                            </Items>
                                        </ext:Panel>
                                    </ext:LayoutRow>
                                </Rows>
                            </ext:RowLayout>
                        </Items>
                    </ext:Panel>
                </West>
                <Center MarginsSummary="0 5 5 0">
                    <ext:TabPanel ID="TabPanelPages" runat="server" EnableTabScroll="true" Cls="CssExtTabPages"
                        MinHeight="200px" MinWidth="130px" LabelPad="5" HideMode="Offsets">
                        <Items>
                            <ext:Panel ID="tabMonitor" runat="server" Title="Monitor" AutoScroll="true">
                                <AutoLoad Url="../UT/Geral/Views/MonitorReportRequest.aspx" Mode="IFrame" />
                            </ext:Panel>
                        </Items>
                        <Listeners>
                            <TabChange Handler="onTabChange(TreePanel1, tab)" />
                            <BeforeTabClose Handler="return unLoadPage(this, tab)" />
                        </Listeners>
                        <Plugins>
                            <ext:TabCloseMenu ID="TabCloseMenu" runat="server" CloseOtherTabsText="Fechar as outras abas"
                                CloseAllTabsText="Fechar todas as abas" CloseTabText="Fechar aba atual" />
                            <ext:GenericPlugin InstanceName="Ext.ux.SlidingTabs" />
                        </Plugins>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    <ext:TaskManager ID="TaskManagerAlert" runat="server">
        <Tasks>
            <ext:Task TaskID="servertime" Interval="3000">
                <DirectEvents>
                    <Update OnEvent="RefreshTimeAlert">
                    </Update>
                </DirectEvents>
            </ext:Task>
        </Tasks>
    </ext:TaskManager>
    </form>
</body>
</html>

[Daniil]

Ok, try to set LayoutOnTabChange="true" for the TabPanel.

[majunior]

Ok, try to set LayoutOnTabChange="true" for the TabPanel.

Not resolved.
If you want I can post on my ftp and you download all my project.

[geoffrey.mcgill]

Hi majunior,

Please post a simplified .aspx code sample demonstrating how to reproduce the problem.

Please do not post your ftp information.

Please do not send us your ftp information.

Please do not send us a test project.

Simplify the problem down to the absolute minimum required to reproduce the problem which would enable us to run locally.

[majunior]

Hi majunior,

Please post a simplified .aspx code sample demonstrating how to reproduce the problem.

Please do not post your ftp information.

Please do not send us your ftp information.

Please do not send us a test project.

Simplify the problem down to the absolute minimum required to reproduce the problem which would enable us to run locally.

See the following code the problem is already playing.
I took my entire project was taking the controls / properties / css / ... slowly and testing.

Recalling that the problem is only reproduced on the publication of iis.

SUtPrt00.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SUtPrt00.aspx.cs" Inherits="Sispro.Ut.Geral.PL.SUtLogW500.Views.SUtPrt00" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Sistema Sispro</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder" runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        var loadPageTreeMenu = function (tabPanel, node) {
            var tab = tabPanel.getItem(node.id);
            if (!tab) {
                tab = tabPanel.add({
                    id: node.id,
                    hideMode: "offsets",
                    title: node.text,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        maskMsg: "Carregando " + node.text + "...",
                        url: node.attributes.href,
                        mode: "iframe"

                    }
                });
            }

            tabPanel.setActiveTab(tab);
        }
     
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <West>
                    <ext:Panel ID="pnlMenu" runat="server" Title="" MinHeight="200px" MinWidth="130px"
                        MaxWidth="500px" Width="182px">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server" MinHeight="54px" UseArrows="true" AutoScroll="true"
                                Animate="true" ContainerScroll="true" RootVisible="false">
                                <Root>
                                    <ext:TreeNode>
                                        <Nodes>
                                            <ext:TreeNode Text="Item 1" NodeID="SUtModelTel001" Href="SUtModelTel001.aspx" />
                                            <ext:TreeNode Text="Item 2" NodeID="SUtModel001" Href="SUtModel001.aspx" />
                                        </Nodes>
                                    </ext:TreeNode>
                                </Root>
                                <Listeners>
                                    <Click Handler="node.toggle(); if (node.attributes.href) { e.stopEvent(); loadPageTreeMenu(#{TabPanelPages}, node); }" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                </West>
                <Center MarginsSummary="0 5 5 0">
                    <ext:TabPanel ID="TabPanelPages" runat="server" HideMode="Offsets">
                        <Items>
                        </Items>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

SUtModel001.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SUtModel001.aspx.cs" Inherits="Sispro.Ut.Geral.PL.SUtLogW500.Views.SUtModel001" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Button ID="Button1" runat="server">
    </ext:Button>
    <ext:Viewport ID="Viewport" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:FormPanel ID="frmDetails" runat="server" >
                        <Items>
                            <ext:Button runat="server">
                            </ext:Button>
                        </Items>
                    </ext:FormPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

SUtModelTel001.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SUtModelTel001.aspx.cs"
    Inherits="Sispro.Ut.Geral.PL.SUtLogW500.Views.SUtModelTel001" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="Viewport" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center >
                    <ext:FormPanel ID="frmDetails" runat="server" >
                        <Items>
                            <ext:Button runat="server">
                            </ext:Button>
                        </Items>
                    </ext:FormPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

[Daniil]

Thanks for the samples, but, unfortunately, I still can't reproduce the issue.

Two issues I can see in your code:

1. There is no LayoutOnTabChange="true" for the TabPanel that I recommend before.

2. Viewport must be a single top level control. I mean the following thing is wrong:

<ext:Button runat="server" ... />
<ext:Viewport runat="server">
   ...
</ext:Viewport>

All widgets must be inside Viewport.

[majunior]

Thanks for the samples, but, unfortunately, I still can't reproduce the issue.

Two issues I can see in your code:

1. There is no LayoutOnTabChange="true" for the TabPanel that I recommend before.

2. Viewport must be a single top level control. I mean the following thing is wrong:

<ext:Button runat="server" ... />
<ext:Viewport runat="server">
   ...
</ext:Viewport>

All widgets must be inside Viewport.

Actually the button outside the ViewPort is wrong, sorry.
But over the previous cases I have a suspicion.
The name of my machine is "majunior"
If I go through IE http://majunior/SisproV50 address the problem is presented.
If I go through IE http://localhost/SisproV50 address the problem is NOT displayed.

[Vladimir]

Hi,

If you add some delay to the Page_Load of tab pages then is the problem reproducible on the local machine?

protected void Page_Load(object sender, EventArgs e)
{
     System.Threading.Thread.Sleep(5000);
}