[CLOSED] Load control to 1 tab at time

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    The fix has been committed to SVN. Now the OnInit of your control should be executed first.
  2. #12
    Quote Originally Posted by Daniil View Post
    The fix has been committed to SVN. Now the OnInit of your control should be executed first.
    Confirm. Thanks

    But now clicked tab stop active. I mean in sample active panel is always the same Tab6 even when clicked for example Tab4 could you confirm you got same result?

    Ok there was a problem with line: tPanel.ActiveTab = panel;
    Last edited by ViDom; May 24, 2013 at 6:38 AM.
  3. #13
    So, do you mind we close the thread?
  4. #14
    Quote Originally Posted by Daniil View Post
    So, do you mind we close the thread?
    one extra problem occurs with your solution here is sample:
    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="Ext.NetTest2.x" %>
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        public class ControlVBox1 : Ext.Net.Container
        {
            private Ext.Net.Panel cntButtons;
            private Ext.Net.Panel mainContainer;
            private Ext.Net.Button btnCreate;
            private Ext.Net.Button btnSearch;
    
            private Ext.Net.GridPanel gridPanelMain;
            private Ext.Net.GridView gridView;
    
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
                this.LayoutConfig.Add(new VBoxLayoutConfig {Align = VBoxAlign.Stretch});
                btnCreate = new Ext.Net.Button {ID = this.ID + "_create", Text = "Create", Height = 26, Width = 70};
                btnSearch = new Ext.Net.Button {ID = this.ID + "_search", Text = "Search", Height = 26, Width = 70};
                btnSearch.DirectClick += new ComponentDirectEvent.DirectEventHandler(btnSearch_DirectClick);
                cntButtons = new Ext.Net.Panel {ID = this.ID + "_buttons"};
                cntButtons.LayoutConfig.Add(new HBoxLayoutConfig {Align = HBoxAlign.Stretch});
                cntButtons.Items.Add(btnCreate);
                cntButtons.Items.Add(btnSearch);
                this.Items.Add(cntButtons);
                gridPanelMain = new GridPanel {ID = this.ID + "_gridPanel", Layout = LayoutType.Fit.ToString()};
                gridView = new Ext.Net.GridView {ID = this.ID + "_gridView"};
                gridPanelMain.View.Add(gridView);
                mainContainer = new Ext.Net.Panel {ID = this.ID + "_main", Flex = 1, Layout = LayoutType.Fit.ToString()};
                mainContainer.Items.Add(gridPanelMain);
                this.Items.Add(mainContainer);
            }
    
            protected void btnSearch_DirectClick(object sender, DirectEventArgs e)
            {
               //do something
            }
    
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                btnCreate.Hidden = false;
            }
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
                btnCreate.Hidden = true;
            }
    
        }
        
    
        public string PreviousTabLoaded
        {
            get { return Session["PreviousTabLoaded"] == null ? string.Empty : (string) Session["PreviousTabLoaded"]; }
            set { Session["PreviousTabLoaded"] = value; }
        }
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            int count = 6;
            Ext.Net.Panel panel;
            while (count != 0)
            {
                panel = new Ext.Net.Panel{ID="panel"+count,Title = "Tab"+count,Layout = LayoutType.Fit.ToString()};
                panel.Loader = new ComponentLoader { ID = panel.ID + "_loader", Mode = LoadMode.Component, RemoveAll = true, ReloadOnEvent = true, TriggerEvent = "activate", DirectMethod = "#{DirectMethods}.GetTabContent",Params = {new Ext.Net.Parameter("tabId","this.id",ParameterMode.Raw)}};
                if (string.IsNullOrEmpty(PreviousTabLoaded))
                {
                    PreviousTabLoaded = panel.ID;
                    tPanel.Items.Add(panel);
                }
                else if (PreviousTabLoaded.Contains(panel.ID))
                {
                    tPanel.Items.Add(panel);
                }
                else
                {
                    tPanel.Items.Add(panel);
                }
                count--;
            }
        }
        [DirectMethod]
        public string GetTabContent(string parameters)
        {
            Dictionary<string, string> prms = JSON.Deserialize<Dictionary<string, string>>(parameters);
    
            ControlVBox1 control = new ControlVBox1 { ID = prms["tabId"] + "_control" };
            Ext.Net.X.Mask.Hide();
            return ComponentLoader.ToConfig(control);
        }
    
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager runat="server" IDMode="Legacy" ScriptMode="Development"></ext:ResourceManager>
        <ext:Viewport runat="server">
            <LayoutConfig>
                <ext:FitLayoutConfig runat="server"/>
            </LayoutConfig>
            <Items>
                <ext:Container runat="server" ID="mainContainer">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig runat="server" Align="Stretch"/>
                    </LayoutConfig>
                    <Items>
                        <ext:Panel runat="server" ID="buttons" Height="30">
                            <Items>
                                <ext:Hidden runat="server" ID="tabId"></ext:Hidden>
                                <ext:Button runat="server" ID="button" Text="button"></ext:Button>
                            </Items>
                        </ext:Panel>
                        <ext:Panel runat="server" ID="mainCont" Flex="1" Layout="FitLayout">
                            <Items>
                                <ext:TextField runat="server"></ext:TextField>
                                <ext:TextField runat="server"></ext:TextField>
                            </Items>
                        </ext:Panel>
                        <ext:Panel runat="server" Title="List" ID="southPanel" MinHeight="200" MaxHeight="300" Flex="1" Collapsible="True" CollapseMode="Default" Collapsed="True" >
                            <Items>
                                <ext:TabPanel ID="tPanel" AutoHeight="True" runat="server" Border="false" ActiveIndex="0" Layout="FitLayout" >
                                    <Listeners>
                                        <BeforeTabChange Handler="oldTab.removeAll();" />
                                        <TabChange Handler="Ext.net.Mask.show({ msg : 'Trwa ładowanie listy...', el : newTab });"></TabChange>
                                    </Listeners>
                                </ext:TabPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    test steps:
    1. uncollapse tabPanel
    2.Click on Search button

    Where should it be rebuild with your configuration and how do this?
    I've tryed to make something like this in OnInit Event : tabPanel.ActiveIndex = tabPanel.Items.IndexOf(panel); but it make infinitive loop.
    Last edited by ViDom; May 24, 2013 at 8:16 AM.
  5. #15
    Quote Originally Posted by ViDom View Post
    test steps:
    1. uncollapse tabPanel
    2.Click on Search button

    Where should it be rebuild with your configuration and how do this?
    Do you mean recreating a control to get its DirectEvent working? Briefly, no way.

    You can refer a page's DirectMethod or an ASHX handler or a WebService.
  6. #16
    Quote Originally Posted by Daniil View Post
    Do you mean recreating a control to get its DirectEvent working? Briefly, no way.

    You can refer a page's DirectMethod or an ASHX handler or a WebService.
    Ok so this loader thing doesn't fit my needs is there any other way to make such functionality? I need to use DirectEvents(don't want to make extra code on Page like DirectMethods because I would need to do about 50 different DirectMethods there which now I have working with DirectEvent and Reflection mechanism inside my control which inherited from Ext.Net.Container and contains this Ext.Net.Button structure is prety same that in sample i provided)
    Last edited by ViDom; May 24, 2013 at 1:16 PM.
  7. #17
    Ok, let's return to this post.

    Quote Originally Posted by ViDom View Post
    In first load of current page (from sample) should be first Tab in this sample Tab0 fully loaded (contain control in items collection)
    If user change active tab for another one:
    1. get rid of all items from Tab0.items (destroy them or how you want to say of it)
    2. load control to currectly activated Tab1.items collection
    3.reapet it with every Tab change

    Is it clear now?
    Here is a very simplified example, but it demonstrates the scenario.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        private Ext.Net.Button CreateButton(string tabId)
        {
            Ext.Net.Button button = new Ext.Net.Button();
            button.ID = tabId + "_button";
            button.Text = "I am " + tabId + "_button";
            button.DirectClick += Button_Click;
    
            return button;
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            // populating initially active tab
            if (!X.IsAjaxRequest)
            {
                this.Panel1.Items.Add(this.CreateButton("Panel1"));
                this.Session["ButtonTabIdToRecreate"] = "Panel1";
            }
    
            // recreating a control within a current tab to get its DirectEvent working
            if (X.IsAjaxRequest)
            {
                string tabId = this.Session["ButtonTabIdToRecreate"].ToString();
                Ext.Net.Panel currentTab = this.FindControl(tabId) as Ext.Net.Panel;
                currentTab.Items.Add(this.CreateButton(tabId));
            }
        }
    
        protected void TabChange(object sender, DirectEventArgs e)
        {
            Ext.Net.Panel oldTab = this.FindControl(e.ExtraParams["oldTabId"]) as Ext.Net.Panel;
            oldTab.RemoveAll();
    
            Ext.Net.Panel newTab = this.FindControl(e.ExtraParams["newTabId"]) as Ext.Net.Panel;
            this.Session["ButtonTabIdToRecreate"] = newTab.ID;
    
            this.CreateButton(newTab.ID).AddTo(newTab);
        }
    
        protected void Button_Click(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("Button_Click", (sender as Ext.Net.Button).ID).Show();
        }
    </script>
     
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />      
             
            <ext:TabPanel runat="server">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title="Tab 1" />
                    <ext:Panel ID="Panel2" runat="server" Title="Tab 2" />
                    <ext:Panel ID="Panel3" runat="server" Title="Tab 3" />
                </Items>
                <DirectEvents>
                    <TabChange OnEvent="TabChange">
                        <ExtraParams>
                            <ext:Parameter Name="oldTabId" Value="oldTab.id" Mode="Raw" />
                            <ext:Parameter Name="newTabId" Value="newTab.id" Mode="Raw" />
                        </ExtraParams>
                    </TabChange>
                </DirectEvents>
            </ext:TabPanel>  
        </form>
    </body>
    </html>
  8. #18
    Quote Originally Posted by Daniil View Post
    Ok, let's return to this post.



    Here is a very simplified example, but it demonstrates the scenario.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        private Ext.Net.Button CreateButton(string tabId)
        {
            Ext.Net.Button button = new Ext.Net.Button();
            button.ID = tabId + "_button";
            button.Text = "I am " + tabId + "_button";
            button.DirectClick += Button_Click;
    
            return button;
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            // populating initially active tab
            if (!X.IsAjaxRequest)
            {
                this.Panel1.Items.Add(this.CreateButton("Panel1"));
                this.Session["ButtonTabIdToRecreate"] = "Panel1";
            }
    
            // recreating a control within a current tab to get its DirectEvent working
            if (X.IsAjaxRequest)
            {
                string tabId = this.Session["ButtonTabIdToRecreate"].ToString();
                Ext.Net.Panel currentTab = this.FindControl(tabId) as Ext.Net.Panel;
                currentTab.Items.Add(this.CreateButton(tabId));
            }
        }
    
        protected void TabChange(object sender, DirectEventArgs e)
        {
            Ext.Net.Panel oldTab = this.FindControl(e.ExtraParams["oldTabId"]) as Ext.Net.Panel;
            oldTab.RemoveAll();
    
            Ext.Net.Panel newTab = this.FindControl(e.ExtraParams["newTabId"]) as Ext.Net.Panel;
            this.Session["ButtonTabIdToRecreate"] = newTab.ID;
    
            this.CreateButton(newTab.ID).AddTo(newTab);
        }
    
        protected void Button_Click(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("Button_Click", (sender as Ext.Net.Button).ID).Show();
        }
    </script>
     
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />      
             
            <ext:TabPanel runat="server">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title="Tab 1" />
                    <ext:Panel ID="Panel2" runat="server" Title="Tab 2" />
                    <ext:Panel ID="Panel3" runat="server" Title="Tab 3" />
                </Items>
                <DirectEvents>
                    <TabChange OnEvent="TabChange">
                        <ExtraParams>
                            <ext:Parameter Name="oldTabId" Value="oldTab.id" Mode="Raw" />
                            <ext:Parameter Name="newTabId" Value="newTab.id" Mode="Raw" />
                        </ExtraParams>
                    </TabChange>
                </DirectEvents>
            </ext:TabPanel>  
        </form>
    </body>
    </html>
    Thanks @Daniil.
    Last edited by ViDom; May 28, 2013 at 9:17 AM.
  9. #19
    Sorry for problem but I've overlook an error after my modification:(

    Here is sample to reproduce:
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <script runat="server">
        public class ControlVBox1 : Ext.Net.Container
        {
            private Ext.Net.Panel cntButtons;
            private Ext.Net.Panel mainContainer;
            private Ext.Net.Button btnCreate;
            private Ext.Net.Button btnSearch;
    
            private Ext.Net.GridPanel gridPanelMain;
            private Ext.Net.GridView gridView;
    
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
                this.LayoutConfig.Add(new VBoxLayoutConfig { Align = VBoxAlign.Stretch });
                btnCreate = new Ext.Net.Button { ID = this.ID + "_create", Text = "Create", Height = 26, Width = 70 };
                btnSearch = new Ext.Net.Button { ID = this.ID + "_search", Text = "Search", Height = 26, Width = 70 };
                btnSearch.DirectClick += new ComponentDirectEvent.DirectEventHandler(btnSearch_DirectClick);
                cntButtons = new Ext.Net.Panel { ID = this.ID + "_buttons" };
                cntButtons.LayoutConfig.Add(new HBoxLayoutConfig { Align = HBoxAlign.Stretch });
                cntButtons.Items.Add(btnCreate);
                cntButtons.Items.Add(new DisplayField { ID = this.ID + "_display", Flex = 1, Html = "&nbsp;" });
                FieldContainer fieldContainer = new FieldContainer { ID = this.ID + "_fieldContainer", Flex = 1, StyleSpec = "text-align: right;" };
                fieldContainer.Items.Add(btnSearch);
                cntButtons.Items.Add(fieldContainer);
                this.Items.Add(cntButtons);
                gridPanelMain = new GridPanel { ID = this.ID + "_gridPanel", Layout = LayoutType.Fit.ToString() };
                gridView = new Ext.Net.GridView { ID = this.ID + "_gridView" };
                gridPanelMain.View.Add(gridView);
                mainContainer = new Ext.Net.Panel { ID = this.ID + "_main", Flex = 1, Layout = LayoutType.Fit.ToString() };
                mainContainer.Items.Add(gridPanelMain);
                this.Items.Add(mainContainer);
            }
    
            protected void btnSearch_DirectClick(object sender, DirectEventArgs e)
            {
                  Ext.Net.X.Msg.Alert("alert","alert").Show();
                  //do something
            }
    
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                btnCreate.Hidden = false;
            }
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
                btnCreate.Hidden = true;
            }
    
        }
    
    
        public string PreviousTabLoaded
        {
            get { return Session["PreviousTabLoaded"] == null ? string.Empty : (string)Session["PreviousTabLoaded"]; }
            set { Session["PreviousTabLoaded"] = value; }
        }
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            int count = 6;
            Ext.Net.Panel panel;
            while (count != 0)
            {
                panel = new Ext.Net.Panel { ID = "panel" + count, Title = "Tab" + count, Layout = LayoutType.Fit.ToString() };
                if (string.IsNullOrEmpty(PreviousTabLoaded))
                {
                    PreviousTabLoaded = panel.ID;
                }
                if (PreviousTabLoaded.Contains(panel.ID))
                {
                    ControlVBox1 control = new ControlVBox1 { ID = panel.ID + "_control" };
                    panel.Items.Add(control);
                    TabPanel1.Items.Add(panel);
                }
                else
                {
                    TabPanel1.Items.Add(panel);
                }
                count--;
            }
        }
     
        protected void TabChange(object sender, DirectEventArgs e)
        {
            Ext.Net.Panel oldTab = TabPanel1.Items.FirstOrDefault(x => x.ClientID == "App." +e.ExtraParams["oldTabId"]) as Ext.Net.Panel;
            oldTab.RemoveAll();
     
            Ext.Net.Panel newTab = TabPanel1.Items.FirstOrDefault(x => x.ClientID == "App." +e.ExtraParams["newTabId"]) as Ext.Net.Panel;
            PreviousTabLoaded = newTab.ID;
            ControlVBox1 control = new ControlVBox1(){ID=newTab.ID+"control"};
            control.AddTo(newTab);
        }
    </script>
      
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Legacy"/>     
              
            <ext:TabPanel ID="TabPanel1" runat="server">
                <DirectEvents>
                    <TabChange OnEvent="TabChange">
                        <ExtraParams>
                            <ext:Parameter Name="oldTabId" Value="oldTab.id" Mode="Raw" />
                            <ext:Parameter Name="newTabId" Value="newTab.id" Mode="Raw" />
                        </ExtraParams>
                    </TabChange>
                </DirectEvents>
            </ext:TabPanel> 
        </form>
    </body>
    </html>
    steps to reproduce:
    1. click on inactive tab example: Tab5
    2. click again on inactive tab example Tab4 - error will say App.panel5_control_create is undefined
  10. #20
    I think you should not recreate an old tab's content if a TabPanel's TabChange event occurs. For example,
    if (PreviousTabLoaded.Contains(panel.ID) && !(this.Request["__EVENTARGUMENT"] != null && this.Request["__EVENTARGUMENT"].Equals("TabPanel1|event|TabChange")))
    {
        ControlVBox1 control = new ControlVBox1 { ID = panel.ID + "_control" };
        panel.Items.Add(control);
        TabPanel1.Items.Add(panel);
    }
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. [CLOSED] First Request taking too much time to load page
    By shaileshsakaria in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 06, 2013, 7:56 PM
  2. How can i do learn GridPanel load time
    By fatihunal in forum 1.x Help
    Replies: 2
    Last Post: Feb 01, 2012, 8:09 PM
  3. [CLOSED] performance when the page load first time
    By lonely7345 in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Oct 06, 2011, 6:06 PM
  4. [URGENT] General Page Load time
    By vs.mukesh in forum 1.x Help
    Replies: 0
    Last Post: Mar 30, 2011, 5:01 AM
  5. Replies: 7
    Last Post: Sep 22, 2010, 8:07 AM

Tags for this Thread

Posting Permissions