What's New?

[CLOSED] Passing values between tabs autoiframe method

  1. #1
    Nov 19, 2008, 4:59 AM

    [CLOSED] Passing values between tabs autoiframe method

    I want to pass text value from one tab to another tab. Using javascript...


    Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
   
</head>
<body>
    <form id="form1" runat="server">
    
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
<br />
<br />
<br />        
        <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Width="600" Height="250" Plain="true">
                <Tabs>
                    <ext:Tab 
                        ID="Tab1" 
                        runat="server" 
                        Title="Normal Tab" 
                        AutoLoadIFrame="1.aspx"
                        BodyStyle="padding: 6px;" 
                        AutoScroll="true" 
                        >
                        
                        
                        </ext:Tab>
                    <ext:Tab 
                        ID="Tab2" 
                        runat="server" 
                        Title="Closable Tab" 
                        Html="You can close this Tab."
                        BodyStyle="padding: 6px;" 
                        Closable="true" 
                        />
                    <ext:Tab 
                        ID="Tab3" 
                        runat="server" 
                        Title="Ajax Tab" 
                       Html="You can close this Tab."
                        BodyStyle="padding: 6px;"
                        AutoScroll="true" 
                        />
                    <ext:Tab 
                        ID="Tab4" 
                        runat="server" 
                        Title="Event Tab" 
                        AutoLoadIFrame="2.aspx"
                        BodyStyle="padding: 6px;" 
                        AutoScroll="true">
                       <%-- <Content>
                            <ext:TextField ID="TextField1" runat="server">
                            </ext:TextField>
                        </Content>--%>
                    </ext:Tab>
                    <ext:Tab 
                        ID="Tab5" 
                        runat="server" 
                        Title="Disabled Tab" 
                        Disabled="true" 
                        Html="Can't see me cause I'm disabled"
                        AutoScroll="true" 
                        />
                </Tabs>
            </ext:TabPanel>
<br />
<br />
        
        
    

    </form>
</body>
</html>
    1.aspx
    
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="1.aspx.cs" Inherits="_1" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
 <script type="text/javascript">
    function m()
    {
        parent.window.TabPanel1.setActiveTab(3);
        parent.window.TabPanel1.Tab4.TextField1.setValue("Hello worls");
    }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
        <ext:Button ID="Button1" runat="server" Text="Submit">
        <Listeners>
            <Click Handler="m()" />
        </Listeners>
        </ext:Button>
    

    </form>
</body>
</html>

    2.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="2.aspx.cs" Inherits="_2" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
        <ext:TextField ID="TextField1" runat="server">
        </ext:TextField>
    

    </form>
</body>
</html>
    How to pass the value when i click the button in the tab1 and insert in the tab4 textfield.

    Thanks in advance.

    Regards
    Madan



  2. #2
    Nov 19, 2008, 8:56 AM

    RE: [CLOSED] Passing values between tabs autoiframe method

    Hi Madan,

    Each <iframe> that is created when you set the .AutoLoadIFrame property is set with an id that uses the following pattern: "{TABID}_IFrame"

    The id of the <iframe> for the first tab would be "Tab1_IFrame". Once you have an instance of the <iframe>, you can referrence any dom objects on that Page.

    The following example demonstrates the full scenario.

    Example (Default.aspx)

    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
   
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:TabPanel 
            ID="TabPanel1" 
            runat="server" 
            ActiveTabIndex="0" 
            Width="600" 
            Height="250">
            <Tabs>
                <ext:Tab 
                    ID="Tab1" 
                    runat="server" 
                    Title="Tab 1" 
                    AutoLoadIFrame="Page1.aspx"
                    />
                <ext:Tab 
                    ID="Tab2" 
                    runat="server" 
                    Title="Tab 2" 
                    AutoLoadIFrame="Page2.aspx"
                    />
            </Tabs>
        </ext:TabPanel>
    </form>
</body>
</html>
    Example (Page1.aspx)

    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
    <script type="text/javascript">
        var sayHello = function () {
            parent.window.TabPanel1.setActiveTab(1);
            parent.window.Tab2_IFrame.TextField1.setValue('Hello World!');
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:Button ID="Button1" runat="server" Text="Submit">
            <Listeners>
                <Click Handler="sayHello();" />
            </Listeners>
        </ext:Button>
    

    </form>
</body>
</html>
    Example (Page2.aspx)

    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:TextField ID="TextField1" runat="server" />
    

    </form>
</body>
</html>
    You can also get an instance of the iframe through the Tab or TabPanel properties, but it's a bit convoluted.

    Example

    // Set via instance of Tab
Tab2.iframe.dom.contentwindow.TextField1.setValue('Hello World1');

// Set second Tab in TabPanel
TabPanel1.items.items[1].iframe.dom.contentwindow.TextField1.setValue('testing...')
    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Nov 20, 2008, 1:11 AM

    RE: [CLOSED] Passing values between tabs autoiframe method

    Hi Geoffrey

    It worked thanks man. You r great...

    Regards
    Madan

Similar Threads

  1. Passing parameter to Ajax Method
    By shijith in forum 1.x Help
    Replies: 1
    Last Post: Jul 26, 2010, 12:52 PM
  2. [CLOSED] passing parameters into tabs with autoloads
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 30, 2010, 10:32 AM
  3. Passing ViewData values to BaseParams
    By mthird in forum 1.x Help
    Replies: 6
    Last Post: Feb 11, 2010, 4:40 PM
  4. Passing values from modal Window to parent
    By Rodriquez in forum 1.x Help
    Replies: 0
    Last Post: Oct 07, 2009, 10:21 AM
  5. Passing values from ext window with GridPanel rowselect to parent form
    By jmilton in forum 1.x Help
    Replies: 0
    Last Post: Apr 08, 2009, 7:36 PM

Posting Permissions