[CLOSED] Passing values between tabs autoiframe method

  1. #1

    [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

    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 & CEO
  3. #3

    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. Replies: 0
    Last Post: Apr 08, 2009, 7:36 PM

Posting Permissions