[CLOSED] Add Activate Event to dynamically created tabs

  1. #1

    [CLOSED] Add Activate Event to dynamically created tabs

    Hi,

    In following code sample tabs are creating dynamically and adding activate event to those tabs. In activate event firing javascript to call DirectMethod. Case 1: While adding any new tab dynamically and assigning tabindex to new tab, the first tab activate event is firing and then the new tab activate event is firing.
    Case 2: Before adding new tab just click on any tab and then add new tab, the last tab event which one created before adding new tab activate event is firing, then the first tab activate event, then the latest new tab event is firing.

    Can you please let me know why javascript is calling while creating tabs dynamically and even the setting active index to newly created tab why first tab is always firing the event?

    <%@ 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">
    <script runat="server">
       
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!Ext.Net.X.IsAjaxRequest)
                CheckLoadingFile();
        }
        public void CheckLoadingFile()
        {
            SortedList sLoansToOpen;
    
            if (Session["AppListToOpen"] != null)
            {
                sLoansToOpen = (SortedList)Session["AppListToOpen"];
                if (sLoansToOpen.Count > 0)
                {
                    LoadAppTabs();
                    pnlFooter.Show();
                }
                else
                {
                    pnlFooter.Hide();
                }
            }
            else
            {
                pnlFooter.Hide();
            }
    
            vpCommonPage.DoLayout();
        }
    
        public void LoadAppTabs()
        {
            Ext.Net.Panel pnlApp;
    
            SortedList sAppList;
            
            if (Session["AppListToOpen"] != null)
            {
                sAppList = (SortedList)Session["AppListToOpen"];
                
                for (int i = 0; i < sAppList.Count; i++)
                {
                    pnlApp = new Ext.Net.Panel();
    
                    pnlApp.ID = "App" + sAppList.GetKey(i).ToString();
    
                    if (sAppList[sAppList.GetKey(i)].ToString().Trim().Length > 0)
                        pnlApp.Title = sAppList[sAppList.GetKey(i)].ToString();
                    else
                        pnlApp.Title = sAppList.GetKey(i).ToString();
    
                    pnlApp.Closable = true;
    
                    pnlApp.Listeners.Close.Handler = "CloseAppPanel('" + sAppList.GetKey(i).ToString() + "')";                    
                    pnlApp.Listeners.Activate.Handler = "OpenLoanSpecifcPages('" + sAppList.GetKey(i).ToString() + "')";
                    pnlApp.AddTo(tbApplications);
                    
                }
                
                tbApplications.ActiveTabIndex = sAppList.IndexOfKey(sAppList.Count);            
            }
        }
    
        public void btnAdd_Click(object sender, DirectEventArgs e)
        {
            SortedList sAppList;
            int keyVal;
            sAppList = (SortedList)Session["AppListToOpen"];
            if (sAppList == null)
                sAppList = new SortedList();
            keyVal = sAppList.Count;
            if (sAppList.Count > 0)
            {
                while (sAppList.ContainsKey(keyVal + 1))
                {
                    keyVal += 1;
                }
                sAppList.Add(keyVal + 1, "Panel " + (keyVal + 1));
            }
            else
                sAppList.Add(1, "Panel 1");
            Session["AppListToOpen"] = sAppList;
            CheckLoadingFile();        
        }
    
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
    
            var CloseAppPanel = function (appid) {
                //alert(appid);
                //Ext.net.DirectMethods.CloseApplication(appid);
            }
    
            var OpenLoanSpecifcPages = function (appid) {
                alert("Hi " + appid)
                //Ext.net.DirectMethods.pnlLoanTabsActivate(appid);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="border" ID="vpCommonPage">
                <Items>
                    <ext:Panel ID="pnlMain" runat="server" Padding="5" Region="Center" BodyStyle="background-color:#DCEAFB">
                        <Items>
                            <ext:Button ID="btnAddPanel" Text="Add Panel" runat="server">
                                <DirectEvents>
                                    <Click OnEvent="btnAdd_Click">
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="pnlFooter" runat="server" Region="South" Height="45" Margins="0,0,0,0"
                        Border="false">
                        <Items>
                            <ext:TabPanel ID="tbApplications" runat="server" Height="45" AnchorHorizontal="100%"
                                Border="false" IDMode="Explicit">
                                <Items>
                                </Items>
                            </ext:TabPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 13, 2011 at 3:50 PM. Reason: [CLOSED]
  2. #2
    Hi,

    1. You don't need to re-render all tabs during each direct event (add button click) - it extremely decreases page performance.
    2. Also it can causes multiple issues as you can see, for example, with Activate.
    3. Don't use .AddTo() method within Page_Load. just populate .Items collection.

    Generally, I can suggest you the following example. Please investigate.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        private const string SESSION_KEY_COUNT = "SESSION_KEY_COUNT";
        
        private int Count 
        {
            get
            {
                object o = Session[SESSION_KEY_COUNT];
                int c = 0;
                if (o != null){
                    int.TryParse(o.ToString(), out c);
                }
                return c;
            }
            set
            {
                Session[SESSION_KEY_COUNT] = value;
            }
        }
        
        private Ext.Net.Panel CreateTab(string i)
        {
            Ext.Net.Panel tab = new Ext.Net.Panel()
            {
                ID = "Tab" + i,
                Title = i,
                Html = "Tab" + i
            };
            tab.Listeners.Activate.Handler = "alert(this.id);";
            return tab;
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                for (int i = 0; i < this.Count; i++)
                {
                    this.TabPanel1.Items.Add(CreateTab(i.ToString()));
                }
            }
        }
    
        protected void AddTab(object sender, DirectEventArgs e)
        {
            int i = this.Count++;
            CreateTab(i.ToString()).AddTo(this.TabPanel1);
            this.TabPanel1.ActiveIndex = i;
        }
    </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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button runat="server" Text="Add a tab" OnDirectClick="AddTab" />
            <ext:TabPanel ID="TabPanel1" runat="server" />
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 02, 2011 at 5:40 PM.

Similar Threads

  1. Replies: 4
    Last Post: Oct 01, 2012, 9:58 AM
  2. [CLOSED] Adding Activate Event to tabs throwing error
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 17, 2011, 8:54 AM
  3. Replies: 1
    Last Post: Nov 11, 2010, 8:15 PM
  4. [CLOSED] Tab activate event
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 01, 2010, 1:21 PM
  5. Tabpanel / Tab activate event
    By locoperoguapo in forum 1.x Help
    Replies: 1
    Last Post: Feb 17, 2009, 1:09 PM

Tags for this Thread

Posting Permissions