What's New?

[CLOSED] TabPanels: Unable to display content from tab even when activated

  1. #1
    Feb 13, 2012, 10:34 PM

    [CLOSED] TabPanels: Unable to display content from tab even when activated

    Hi,

    I have a ParentPage where I display 3 tabs.
    The second tab (ChildPage2.aspx) has 3 sub tabs in turn.
    All 3 sub tabs get activated by doing a setActiveTab. Sub Tab 1 is the final one that gets activated. However, the content from Sub Tab 1 is not displaying, unless I click on Sub Tab 2 or Sub Tab3 and then come back to Sub Tab 1.
    Could you please help with displaying the content from Sub Tab 1 automatically when it gets activated?

    Here are the steps: Start the application (with parentForm.aspx as the start page).
    Click on Tab 2
    Sub Tab1 is now the active sub tab, but content will not display.

    I am attaching code from all the pages from my Sample Project:

    Thanks

    Ravi Swaminathan

    ParentForm.aspx (This is the main starting page which has the primary 3 tabs under TabPanel)

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ParentForm.aspx.vb" Inherits="EXTTabs.ParentForm" %>
   <%@ 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>Ext.NET Example</title>
 
    <script type="text/javascript">
        var onUpdate = function () {
            var tabPanel = this.ownerCt;

            tabPanel.tabsWithFrameCount--;

            if (tabPanel.tabsWithFrameCount === 0) {
                Ext.net.Mask.hide();
            }
        };

        var testFunction = function (tabPanel) {
            tabPanel.items.each(function (tab) {
                tab.getBody().testFunction2();
            });
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabPanel
            ID="TabPanel1"
            runat="server"
            LayoutOnTabChange="true"
            ActiveIndex="1">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title="Tab 1">
                    <AutoLoad Url="ChildPage.aspx" Mode="IFrame" />
                    <Listeners>
                        <Update Fn="onUpdate" />
                    </Listeners>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Title="Tab 2">
                    <AutoLoad Url="ChildPage2.aspx" Mode="IFrame" />
                    <Listeners>
                        <Activate
                            Handler="this.ownerCt.setActiveTab(2);"
                            Delay="10"
                            Single="true" />
                        <Update Fn="onUpdate" />
                    </Listeners>
                </ext:Panel>
                <ext:Panel ID="Panel3" runat="server" Title="Tab 3">
                    <AutoLoad Url="ChildPage.aspx" Mode="IFrame" />
                    <Listeners>
                        <Activate
                            Handler="this.ownerCt.setActiveTab(0);"
                            Delay="10"
                            Single="true" />
                        <Update Fn="onUpdate" />
                    </Listeners>
                </ext:Panel>
            </Items>
            <Listeners>
                <AfterLayout
                    Handler="Ext.net.Mask.show({
                                 el : this.el
                             });
                             this.tabsWithFrameCount = this.items.getCount();"
                    Delay="10"
                    Single="true" />
            </Listeners>
        </ext:TabPanel>
         <ext:Button ID="Button1" runat="server" Text="Show Alert on Tabs" OnClientClick="testFunction(TabPanel1);" />
    </form>
</body>
</html>

    ChildPage.aspx (This page constitutes the first and third tab of ParentForm.aspx)
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChildPage.aspx.vb" Inherits="EXTTabs.ChildPage" %>

<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    
        System.Threading.Thread.Sleep(3000)
    End Sub
    
</script>

<!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>Ext.NET Example</title>
 
    <script type="text/javascript">
        var testFunction2 = function () {
            alert('Hello!');
        };
    </script>
</head>
<body>
    Hello World!
</body>
</html>
    ChildPage2.aspx (This page constitutes the second tab of ParentForm.aspx, and which in turn has 3 tabs panels)

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChildPage2.aspx.vb" Inherits="EXTTabs.ChildPage2" %>
 <%@ 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>Ext.NET Sub Tabs Example</title>
 
    <script type="text/javascript">
        var onUpdate = function () {
            var tabPanel = this.ownerCt;

            tabPanel.tabsWithFrameCount--;

            if (tabPanel.tabsWithFrameCount === 0) {
                Ext.net.Mask.hide();
            }
        };

        var testFunction = function (tabPanel) {
            tabPanel.items.each(function (tab) {
                tab.getBody().testFunction();
            });
        };

        var testFunction2 = function () {
            alert('Hello from Panel that has Sub Panels!');
        };
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabPanel
            ID="TabPanel1"
            runat="server"
             Height="50"
            LayoutOnTabChange="true"
            ActiveIndex="1">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title="Sub Tab 1">
                    <AutoLoad Url="ChildPage3.aspx" Mode="IFrame" />
                    <Listeners>
                        <Update Fn="onUpdate" />
                    </Listeners>
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Title="Sub Tab 2">
                    <AutoLoad Url="ChildPage4aspx.aspx" Mode="IFrame" />
                    <Listeners>
                        <Activate
                            Handler="this.ownerCt.setActiveTab(2);"
                            Delay="10"
                            Single="true" />
                        <Update Fn="onUpdate" />
                    </Listeners>
                </ext:Panel>
                <ext:Panel ID="Panel3" runat="server" Title="Sub Tab 3">
                    <AutoLoad Url="ChildPage4aspx.aspx" Mode="IFrame" />
                    <Listeners>
                        <Activate
                            Handler="this.ownerCt.setActiveTab(0);"
                            Delay="10"
                            Single="true" />
                        <Update Fn="onUpdate" />
                    </Listeners>
                </ext:Panel>
            </Items>
            <Listeners>
                <AfterLayout
                    Handler="Ext.net.Mask.show({
                                 el : this.el
                             });
                             this.tabsWithFrameCount = this.items.getCount();"
                    Delay="10"
                    Single="true" />
            </Listeners>
        </ext:TabPanel>
         <ext:Button ID="Button1" runat="server" Text="Show Alert on Sub Tabs" OnClientClick="testFunction(TabPanel1);" />
    </form>
</body>
</html>
    ChildPage3.aspx (This page constitutes the first tab panel of ChildPage2.aspx which has three sub tab panels)

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChildPage3.aspx.vb" Inherits="EXTTabs.ChildPage3" %>

<!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>EXT Net Example  - Sub Tabs</title>
    <script type="text/javascript">
        var testFunction = function () {
            alert('Hello Sub Tabs!');
        };

    </script>
</head>
<body>
Hello World!
    <form id="form1" runat="server">
    <div>
    
        <asp:Label ID="lblDisplaySubTab1" runat="server" Text="This is Sub Tab 1"></asp:Label>
    
    </div>
    </form>
</body>
</html>
    ChildPage4aspx.aspx (This page constitutes the second and third sub tabs of ChildPage2. aspx which has 3 sub panels)

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Childpage4aspx.aspx.vb" Inherits="EXTTabs.Childpage4aspx" %>

<!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>
     <script type="text/javascript">
         var testFunction = function () {
             alert('Hello Sub Tabs!');
         };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
    Last edited by Daniil; Feb 14, 2012 at 1:51 PM. Reason: [CLOSED]
  2. #2
    Feb 14, 2012, 6:22 AM
    Hi,

    Needs to force layouting for "Sub Tab 1" when a "Tab 1" is activated.

    Please replace the existing Activate listener of the Panel2 of the main page with:

    Example
    <Activate
    Handler="this.ownerCt.setActiveTab(2);
                this.on('activate', function () {
                    this.getBody().TabPanel1.doLayout();
                },
                this,
                {
                    single : true
                });"
    Delay="10"
    Single="true" />
  3. #3
    Feb 14, 2012, 1:45 PM

    Re: abPanels: Unable to display content from tab even when activated

    Thanks very much, Daniil, it works!

    Ravi Swaminathan

Similar Threads

  1. [CLOSED] Gridpanel unable to display field values for rows added in Store.AddRecord in Code Behind
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 29, 2012, 10:42 PM
  2. [CLOSED] Unable to Call JS Method on Inactive Tab content
    By wisdomchuck in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 08, 2012, 5:52 PM
  3. [CLOSED] [1.0] - What is the best way to display formated XML content in TextArea
    By drkoh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 21, 2011, 12:53 PM
  4. Save HTMLEditor content and then display it in a textbox
    By Kamal in forum 1.x Help
    Replies: 3
    Last Post: Jul 14, 2009, 9:47 PM
  5. [CLOSED] dynamic tabs do not display content
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 07, 2009, 1:05 AM

Posting Permissions