Tab - Clear One Tab when another tab clicked

  1. #1

    Tab - Clear One Tab when another tab clicked

    I have a tabpanel with more than one tab - the tabs load an iframe - when teh user clicks Tab3 - the iframe loads - part of Tab3's data is set from a selection on Tab1 - so when the user clicks back to Tab1, makes a new selection from a Combo, and then back to Tab3 to see the results - it takes a second or 2 for Tab3 to reload - so wanted to try and clear Tab3 when the user clicks on Tab1 - so that when they come back to Tab3 - it is blank and they are not staring at the old data, before the new filter kicks in and reloads Tab3?
  2. #2

    RE: Tab - Clear One Tab when another tab clicked

    Hi Tbaseflug,

    Here's a sample which I think demonstrates the scenario.

    Example (Parent)

    <%@ Page Language="C#"  %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" 
        "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
    <html>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Title="Parent"
                Width="300"
                Height="185">
                <Body>
                    <ext:FitLayout runat="server">
                        <ext:TabPanel 
                            ID="TabPanel1" 
                            runat="server" 
                            ActiveTabIndex="0" 
                            Height="300"
                            Border="false">
                            <Defaults>
                                <ext:Parameter Name="bodyStyle" Value="padding:6px;" />
                            </Defaults>
                            <Tabs>
                                <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                    <Body>
                                        <ext:FormLayout runat="server">
                                            <Anchors>
                                                <ext:Anchor Horizontal="100%">
                                                    <ext:ComboBox 
                                                        ID="ComboBox1" 
                                                        runat="server" 
                                                        FieldLabel="Options" 
                                                        Editable="false">
                                                        <SelectedItem Value="1" />
                                                        <Items>
                                                            <ext:ListItem Text="Item 1" Value="1" />
                                                            <ext:ListItem Text="Item 2" Value="2" />
                                                            <ext:ListItem Text="Item 3" Value="3" />
                                                            <ext:ListItem Text="Item 4" Value="4" />
                                                        </Items>
                                                    </ext:ComboBox>
                                                </ext:Anchor>
                                            </Anchors>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:Tab>
                                <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
                                    <AutoLoad Url="Child.aspx" Mode="IFrame" ShowMask="true" />
                                     <Listeners>
                                        <Activate Handler="el.autoLoad.params = { item: ComboBox1.getValue() }; el.reload();" />
                                        <Deactivate Handler="el.clearContent();" />
                                    </Listeners>
                                </ext:Tab>
                            </Tabs>
                        </ext:TabPanel>
                    </ext:FitLayout>
                </Body>
            </ext:Window>
        </form>
    </body>
    </html>
    Example (Child)



    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(500);
            this.Label1.Text = string.Concat("You choose Item #", Request.QueryString["item"]);
        }
    </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>Child Window</title>
    </head>
    <body>
        <ext:ScriptManager runat="server" />
        
        <ext:Label ID="Label1" runat="server" />
    </body>
    </html>
    The only tricky part was figuring out how to pass the ComboBox1 selected value to the params object. Typically this would be handled by configuring the inner <Params> property, but there was a problem. Adding the following bit to the <Active> Handler was the solution.

    Example

    el.autoLoad.params = { item: ComboBox1.getValue() };
    Hope this helps.


    Geoffrey McGill
    Founder
  3. #3

    RE: Tab - Clear One Tab when another tab clicked

    I put in the below and keep getting a JS error - object does not support this property or method:

    <ext:Tab 
        ID="Tab3" 
        runat="server" 
        Title="Inpatient" 
        BodyStyle="padding-top: 4px;"
        AutoScroll="false" 
        TabTip="Click here to load the Inpatient Contract Terms">
        <AutoLoad Url="Inpatient.aspx?ID=I" Mode="IFrame" ShowMask="true" />
        <Listeners>
            <Activate Handler="el.reload();" />
            <Deactivate Handler="el.clearContent();" />
        </Listeners>
    </ext:Tab>
  4. #4

    RE: Tab - Clear One Tab when another tab clicked

    I cannot get the deactivate portion to work... Also when using the below - I cannot see any querystring being passed

    <ext:Tab ID="Tab2" Title="Inpatient" runat="server" AutoScroll="false" AutoWidth="true">
        <AutoLoad Url="Terms.aspx" Mode="IFrame" ShowMask="true" />
        <Listeners>
            <Activate Handler="el.autoLoad.params = { item: ComboBox1.getValue() }; el.reload();" />
        </Listeners>
    </ext:Tab>
  5. #5

    RE: Tab - Clear One Tab when another tab clicked

    Hi Tbaseflug,

    You might have to hold out for the v0.8 release. I think the .clearContent() function was added after the v0.7 release. I missed pointing that out in my original response.

    Geoffrey McGill
    Founder
  6. #6

    RE: Tab - Clear One Tab when another tab clicked

    thanks - does that also apply to the params function? I am not seeing an "item" querystring to the url
  7. #7

    RE: Tab - Clear One Tab when another tab clicked

    My first querystring will not change - so it is hardcoded - but how can I do something like this?


    <AutoLoad Url="Terms.aspx?ID=I&amp;NO=ComboBox1.getValue()" Mode="IFrame" ShowMask="true"/>

Similar Threads

  1. [CLOSED] Treegrid - determine what column was clicked on
    By fordprefect in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 13, 2012, 5:12 PM
  2. Replies: 0
    Last Post: Mar 08, 2011, 4:29 AM
  3. selection changes when clicked to next page
    By aniketyadav7 in forum 1.x Help
    Replies: 11
    Last Post: Dec 10, 2010, 9:33 AM
  4. [CLOSED] [1.0] MultiField displays border when clicked
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 19, 2010, 4:28 AM
  5. Obtain clicked node TreeView
    By jpbelli in forum 1.x Help
    Replies: 3
    Last Post: Jan 29, 2009, 11:55 AM

Posting Permissions