[CLOSED] Tab Panel Tab Activate Listeners issue

  1. #1

    [CLOSED] Tab Panel Tab Activate Listeners issue

    Hi

    I have implemented tab listeners handler for all tabs in tab panel. In my scenario I have to show specific button and specific tab based on selection from parent window. In parent window I have six buttons for add and edit specific item. If I click on add button the window is showing properly, but if I click on edit button, the popup window is showing required button initially and then activate listener activating, then hiding required button (Update) and showing Add button. If I am not implemented activate listener all required buttons showing properly based on selection from parent, but in popup window if I want to navigate to other tab the controls are not update automatically. Please check the code so that you can understand my issue.

    Parent form...
    
    <%@ Page Language="VB" %>
    
    <%@ 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">
    <script runat="server">
       
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script language="javascript" type="text/javascript">
    
            var ShowCommonWindow = function (opt) {
                var windowConfig = {
                    id: "WindowTestCommon",
                    height: 540,
                    width: 720,
                    hidden: false,
                    closeAction: "hide",
                    buttonAlign: "center",
                    iconCls: "icon-pagewhitecode",
                    buttons: [
                        {
                            id: "btnJAddText",
                            text: "Add Text",
                            iconCls: "icon-add",
                            hidden: true,
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnDelConditions.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnJEditText",
                            text: "Update Text",
                            iconCls: "icon-disk",
                            hidden: true,
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnAddNew.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnJAddLabel",
                            text: "Add Label",
                            iconCls: "icon-add",
                            hidden: true,
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnUpdate.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnJEditLabel",
                            text: "Update Label",
                            iconCls: "icon-disk",
                            hidden: true,
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnCommonRefresh.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnJAddComment",
                            text: "Add Comment",
                            iconCls: "icon-add",
                            hidden: true,
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnDeleteDocs.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnJEditComment",
                            text: "Update Comment",
                            iconCls: "icon-disk",
                            hidden: true,
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').getBody().btnUploadDocument.fireEvent('click');
                                    }
                                }
                            }
                        },
                        {
                            id: "btnClose",
                            text: "Close",
                            listeners: {
                                click: {
                                    fn: function (el, e) {
                                        parent.parent.Ext.getCmp('WindowTestCommon').hide();
                                    }
                                }
                            }
                        }
                    ],
                    autoLoad: {
                        url: "TabTesting.aspx?" + new Date().getTime(),
                        nocache: true,
                        mode: "iframe",
                        showMask: true,
                        triggerEvent: "show",
                        reloadOnEvent: true,
                        params: {
                            DEFAULT_TO_OPEN: opt
                        }
                    }
                }
                renderWindow(windowConfig);
            }
    
            var renderWindow = function (windowConfig) {
                var win = Ext.getCmp(windowConfig.id);
                if (!win) {
                    new Ext.Window(windowConfig);
                } else {
                    win.close();
                    new Ext.Window(windowConfig);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="resMngr" runat="server" />
        <ext:Button ID="btnAddText" runat="server" Text="Add Text" Width="120">
            <Listeners>
                <Click Handler="ShowCommonWindow('AddText')" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnEditText" runat="server" Text="Edit Text" Width="120">
            <Listeners>
                <Click Handler="ShowCommonWindow('EditText')" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnAddLabel" runat="server" Text="Add Label" Width="120">
            <Listeners>
                <Click Handler="ShowCommonWindow('AddLabel')" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnEditLabel" runat="server" Text="Edit Label" Width="120">
            <Listeners>
                <Click Handler="ShowCommonWindow('EditLabel')" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnAddComment" runat="server" Text="Add Comment" Width="120">
            <Listeners>
                <Click Handler="ShowCommonWindow('AddComment')" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnEditComment" runat="server" Text="Edit Comment" Width="120">
            <Listeners>
                <Click Handler="ShowCommonWindow('EditComment')" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    The child window code ...
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TabTesting.aspx.vb" Inherits="Testing_TabTesting" %>
    
    <%@ 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>
        <script language="javascript" type="text/javascript">
            var ControlsToShow = function (controlid1) {
    
                parent.parent.parent.Ext.getCmp('btnJAddText').hide();
                parent.parent.parent.Ext.getCmp('btnJEditText').hide();
                parent.parent.parent.Ext.getCmp('btnJAddLabel').hide();
                parent.parent.parent.Ext.getCmp('btnJEditLabel').hide();
                parent.parent.parent.Ext.getCmp('btnJAddComment').hide();
                parent.parent.parent.Ext.getCmp('btnJEditComment').hide();
    
                if (controlid1.length > 0)
                    parent.parent.parent.Ext.getCmp(controlid1).show();
            }
        </script>
    </head>
    <body id="bodyload" runat="server">
        <form id="form1" runat="server">
        <ext:ResourceManager ID="resMngr" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
            <Items>
                <ext:TabPanel ID="pnlbackground" runat="server" Region="Center" Border="false">
                    <Items>
                        <ext:Panel ID="pnlText" Title="Text Type" runat="server" BodyStyle="background-color:#ffffff"
                            Border="false" Layout="BorderLayout">
                            <TopBar>
                                <ext:Toolbar ID="tbLS" runat="server">
                                    <Items>
                                        <ext:Button ID="btnAddText" runat="server" Text="Add Text" Icon="Add" IconAlign="Left">
                                            <Listeners>
                                                <Click Handler="ControlsToShow('btnJAddText')" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarSeparator />
                                        <ext:Button ID="btnEditText" runat="server" Text="Edit Text" Icon="ApplicationEdit"
                                            IconAlign="Left">
                                            <Listeners>
                                                <Click Handler="ControlsToShow('btnJEditText')" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarFill />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Items>
                                <ext:Panel ID="pnlTextCenter" runat="server" Region="Center">
                                </ext:Panel>
                            </Items>
                            <Listeners>
                                <Activate Handler="ControlsToShow('btnJAddText')" />
                            </Listeners>
                        </ext:Panel>
                        <ext:Panel ID="pnlLabel" Title="Label Type" runat="server" BodyStyle="background-color:#ffffff"
                            Border="false" Layout="BorderLayout">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="btnAddLabel" runat="server" Text="Add Label" Icon="Add" IconAlign="Left">
                                            <Listeners>
                                                <Click Handler="ControlsToShow('btnJAddLabel')" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarSeparator />
                                        <ext:Button ID="btnEditLabel" runat="server" Text="Edit Label" Icon="ApplicationEdit"
                                            IconAlign="Left">
                                            <Listeners>
                                                <Click Handler="ControlsToShow('btnJEditLabel')" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarFill />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Items>
                                <ext:Panel ID="pnlLabelCenter" runat="server" Region="Center">
                                </ext:Panel>
                            </Items>                        
                            <Listeners>
                                <Activate Handler="ControlsToShow('btnJAddLabel')" />
                            </Listeners>
                        </ext:Panel>
                        <ext:Panel ID="pnlComment" Title="Comment Type" runat="server" BodyStyle="background-color:#ffffff"
                            Border="false" Layout="BorderLayout">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server">
                                    <Items>
                                        <ext:Button ID="btnAddComment" runat="server" Text="Add Text" Icon="Add" IconAlign="Left">
                                            <Listeners>
                                                <Click Handler="ControlsToShow('btnJAddComment')" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarSeparator />
                                        <ext:Button ID="btnEditComment" runat="server" Text="Edit Text" Icon="ApplicationEdit"
                                            IconAlign="Left">
                                            <Listeners>
                                                <Click Handler="ControlsToShow('btnJEditComment')" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarFill />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Items>
                                <ext:Panel ID="Panel4" runat="server" Region="Center">
                                </ext:Panel>
                            </Items>
                            <Listeners>
                                <Activate Handler="ControlsToShow('btnJAddComment')" />
                            </Listeners>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    the code behind...
    Imports Ext.Net
    
    Partial Class Testing_TabTesting
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim controlToShow As String = ""
            If Not Ext.Net.X.IsAjaxRequest Then
                If Not Me.Request("DEFAULT_TO_OPEN") Is Nothing Then
                    Select Case Me.Request("DEFAULT_TO_OPEN")
                        Case "AddText"
                            controlToShow = "btnJAddText"
                            pnlbackground.ActiveIndex = 0
                        Case "EditText"
                            controlToShow = "btnJEditText"
                            pnlbackground.ActiveIndex = 0
                        Case "AddLabel"
                            controlToShow = "btnJAddLabel"
                            pnlbackground.ActiveIndex = 1
                        Case "EditLabel"
                            controlToShow = "btnJEditLabel"
                            pnlbackground.ActiveIndex = 1
                        Case "AddComment"
                            controlToShow = "btnJAddComment"
                            pnlbackground.ActiveIndex = 2
                        Case "EditComment"
                            controlToShow = "btnJEditComment"
                            pnlbackground.ActiveIndex = 2
                    End Select
                End If
                bodyload.Attributes.Add("onload", "javascript:ControlsToShow('" & controlToShow & "')")
            End If
        End Sub
    End Class
    Last edited by Daniil; Nov 18, 2011 at 5:39 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I was able to run the code you posted, but I'm not sure what I should reproduce or understand the requirement.

    Please provide the exact steps to reproduce.
    Last edited by Daniil; Nov 16, 2011 at 3:46 PM.
  3. #3
    Hi Daniil,

    I don't know why the code is not running. Anyhow my requirement is the popup window button controls needs to show based on selected function. Please check the attachment.

    If we click on "Add Text" button in parent form the button listener will open popup window and "Text Type" tab will activate and the buttons at bottom will show "Add Text" and "Close", similarly for Label and Comment.

    If we click on "Edit Text" button in parent form the button listener will open popup window and "Text Type" tab will activate and the buttons at bottom should show "Update Text" and "Close", but the listener added to "Text Type" tab will show "Add Text", but I need the "Update Text" button should show. We can achieve this by removing "Tab Activate" listener. If I remove there will be another issue like after open popup window I want to navigate to other tabs means Label type or comment type, the button at bottom also should change. This functionality can be achieved by adding tab activate listener.

    You can understand easily if the code runs. Please let me know where you have an issue to run the code, because there is no db connectivity.
    Click image for larger version. 

Name:	TabActive.PNG 
Views:	152 
Size:	42.6 KB 
ID:	3450

    Quote Originally Posted by Daniil View Post
    Hi,

    I was unable to run the code you posted, but I'm not sure what I should reproduce or understand the requirement.

    Please provide the exact steps to reproduce.
  4. #4
    I was unable to run the code you posted
    It was a typo, should be "I was able".

    And thanks for the further details, seems the requirement is cleat now.

    Investigating.
  5. #5
    Please look at the example.

    Example Parent Page
    <%@ Page Language="C#" %>
     
    <%@ 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>
        <script language="javascript" type="text/javascript">
     
            var showWindow = function (buttonId) {
                var windowConfig = {
                    id : "Window1",
                    height : 540,
                    width : 720,
                    hidden : false,
                    closeAction : "hide",
                    buttonAlign : "center",
                    buttons : [{
                            id : "btnAddText",
                            text : "Add Text",
                            hidden : true,
                            tabId : "PanelText"
                        }, {
                            id : "btnUpdateText",
                            text : "Update Text",
                            hidden : true,
                            tabId : "PanelText"
                        }, {
                            id : "btnAddLabel",
                            text : "Add Label",
                            hidden : true,
                            tabId : "PanelLabel"
                        }, {
                            id : "btnUpdateLabel",
                            text : "Update Label",
                            hidden : true,
                            tabId : "PanelLabel"
                        }, {
                            id : "btnAddComment",
                            text : "Add Comment",
                            hidden : true,
                            tabId : "PanelComment"
                        }, {
                            id : "btnUpdateComment",
                            text : "Update Comment",
                            hidden : true,
                            tabId : "PanelComment"
                        }, {
                            id : "btnClose",
                            text : "Close",
                            listeners : {
                                click : {
                                    fn : function () {
                                        parent.Ext.getCmp('Window1').hide();
                                    }
                                }
                            }
                        }
                    ],
                    autoLoad : {
                        url : "Test.aspx?" + new Date().getTime(),
                        nocache : true,
                        mode : "iframe",
                        showMask : true,
                        triggerEvent : "show",
                        reloadOnEvent : true,
                        params : {
                            buttonId : buttonId
                        }
                    }
                };
                renderWindow(windowConfig);
            }
     
            var renderWindow = function (windowConfig) {
                var win = Ext.getCmp(windowConfig.id);
                if (!win) {
                    new Ext.Window(windowConfig);
                } else {
                    win.close();
                    new Ext.Window(windowConfig);
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button runat="server" Text="Add Text" OnClientClick="showWindow('btnAddText')" />
            <ext:Button runat="server" Text="Edit Text" OnClientClick="showWindow('btnUpdateText')" />
            <ext:Button runat="server" Text="Add Label" OnClientClick="showWindow('btnAddLabel')" />
            <ext:Button runat="server" Text="Edit Label" OnClientClick="showWindow('btnUpdateLabel')" />
            <ext:Button runat="server" Text="Add Comment" OnClientClick="showWindow('btnAddComment')" />
            <ext:Button runat="server" Text="Edit Comment" OnClientClick="showWindow('btnUpdateComment')" />
        </form>
    </body>
    </html>
    Example IFrame Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            string buttonId = Request["buttonId"],
                   script = string.Format("showButton('{0}', {1});", buttonId, JSON.Serialize(true));
            this.ResourceManager1.Listeners.DocumentReady.Handler = script;
        }
    </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 language="javascript" type="text/javascript">
            var showButton = function (buttonId, initial) {
                var buttons = parent.Ext.getCmp('Window1').fbar.items;
                buttons.each(function (c) {
                    c.hide();
                });
                buttons.get("btnClose").show();
                buttons.get(buttonId).show();
    
                if (initial) {
                    TabPanel1.setActiveTab(buttons.get(buttonId).tabId);
                }
            };
    
            var onTabChange = function (tb, tab) {
                var buttonId;
                switch (tab.id) {
                    case "PanelText" :
                        buttonId = "btnAddText";
                        break;
                    case "PanelLabel" :
                        buttonId = "btnAddLabel";
                        break;
                    case "PanelComment" :
                        buttonId = "btnAddComment";
                        break;
                };
                showButton(buttonId);
            };
        </script>
    </head>
    <body runat="server">
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="Border">
                <Items>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                        <Items>
                            <ext:Panel 
                                ID="PanelText" 
                                runat="server" 
                                Title="Text Type" 
                                Layout="FitLayout">
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:Button runat="server" Text="Add Text" OnClientClick="showButton('btnAddText');" />
                                            <ext:Button runat="server" Text="Update Text" OnClientClick="showButton('btnUpdateText');" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Items>
                                    <ext:Panel runat="server" Region="Center" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel 
                                ID="PanelLabel" 
                                runat="server" 
                                Title="Label Type" 
                                Layout="FitLayout">
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:Button runat="server" Text="Add Label" OnClientClick="showButton('btnAddLabel');" />
                                            <ext:Button runat="server" Text="Update Label" OnClientClick="showButton('btnUpdateLabel');" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Items>
                                    <ext:Panel runat="server" Region="Center" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel 
                                ID="PanelComment" 
                                runat="server" 
                                Title="Comment Type" 
                                Layout="FitLayout">
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:Button runat="server" Text="Add Comment" OnClientClick="showButton('btnAddComment');" />
                                            <ext:Button runat="server" Text="Update Comment" OnClientClick="showButton('btnUpdateComment');" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Items>
                                    <ext:Panel runat="server" Region="Center" />
                                </Items>
                            </ext:Panel>
                        </Items>
                        <Listeners>
                            <TabChange Fn="onTabChange" />
                        </Listeners>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 2
    Last Post: May 15, 2012, 11:47 AM
  2. [CLOSED] Tab Panel Tab Activate function.
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 17, 2011, 4:42 PM
  3. [CLOSED] [1.0] FormPanel > Listeners: ClientValidation Issue...
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 05, 2010, 5:55 PM
  4. Replies: 4
    Last Post: Aug 10, 2009, 4:00 PM
  5. [CLOSED] Another issue with Listeners...
    By state in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 02, 2009, 7:30 PM

Tags for this Thread

Posting Permissions