[CLOSED] Issue with Dynamic Controlsl creation in Tab Panels (Version: 0.8.3)

  1. #1

    [CLOSED] Issue with Dynamic Controlsl creation in Tab Panels (Version: 0.8.3)

    Dear Team,

    We have a problem with rendering controls dynamically in Tabs of a tab panel.

    The scenario is as follows:

    I am using visual studio 2005 and coolite ver#0.8.3
    Issue#1

    In the west panel i have 3 tab controls, inside tab1 and tab2 i have an accordian pane in which i have added dynamic multi check box contorls. For tab1 it is binding properly, but if i open tab{2} it is not. in my project the accordian pane has to be in tab{2}. Please adivse what is the issue over here

    Issue#2

    In the center i have added 6 portlets, I want to have a maximize button for each portlet and if i click on the maximize button the protlet should occupie the whole part inside the center and remaining portlets will be adjusted automatically. If i close the maximized portlet all the protlets has to come its original position. Please let me know your thoughts.

    I am attaching the sample project and screen shot document.
    Attached Files
    Last edited by Daniil; Oct 27, 2010 at 6:17 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please see modified sample
    <%@ 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 runat="server">
        <title>Untitled Page</title>
        
        <script runat="server">
            string[] arrTests = new string[] { "Sachin", "Rahul", "Shane", "Warne", "Mitchel", "Watson", "Gary", "William", "Deepak", "Sachin", "Rahul", "Shane", "Warne", "Mitchel", "Watson", "Gary", "William", "Deepak"};
        string[] arrTestId = new string[] { "DEA8C4D7-D897-48D8-8CB3-70F971C96E79", "8F871E0E-FCEC-4FC3-8AC6-D6CD44918DDF", "B9E3A404-C760-480C-A380-504D0B87432D", "4A5C9EDA-656D-46AB-A0E1-9393FF138C2E", "AEE48682-E089-4839-A612-D132BBA3587E", "0D03254D-253B-4FFE-A724-4DFE76A03E9A", "7C291AC4-95C1-4B69-8164-ADB05DBF63D0", "9F06EF49-8AEA-4058-BEAA-3571A28D5C75", "51BC45B6-4141-4303-8589-A66E860E92F0", "71BE23FA-1038-4C65-A844-EBD9B31F66E0", "1E0E7F22-F6DC-4217-ADAD-5DD211595B2F", "8825912F-22E1-464C-B48A-28A16EEE67EC", "E46C6927-0126-4E25-92D8-BB06BD2E58F9", "7422C476-8453-4BD9-A6B9-469776BECF2C", "A35B1B8F-D2A4-498D-BE53-AEA2FDB18EF4", "FC1B88EB-F086-4101-A9B1-AB2162020B87", "BA599EDD-699A-4AD2-BB37-FF3EE87AE68E", "77F26D09-449D-438C-87D8-FDE7A69443DD", "5B30A37C-BD9F-404F-999B-D1C3242B2F1A", "95A20808-6E31-4649-A233-26C693BB7FAB", "A41C09F9-2B62-4067-9243-C67025DF59B0", "C03B11B0-8EEC-4EA0-960D-B6062ED377FB", "E535A7A9-61BA-4DE4-9AA4-ED57C96F4FEB", "D2DB9B8E-94BF-4850-BA5F-32E56138069F", "0111394E-6282-4F6A-8FD1-30E257D61162", "20DD90C0-F8EA-4422-8629-CD4D492D303C", "30BA5B81-721E-46DF-8454-06FC94F1CD3D", "74DC6EF2-04FE-4A99-B988-5D83D363665C", "AEC64F45-9477-4D0C-B62A-726FF584D840", "AED2B9D2-0B7B-4DFA-8687-9AFF274CEC4A", "E8263C07-EB21-41D2-97AD-32C41EDB5AA7", "4F264CCC-1A66-431B-B27F-7D60F2497000", "71BD2361-E9EF-4083-9AA4-B3B291923497", "101A0714-0971-4CB1-B71C-93C8299ADFC2", "D6F4B89A-7129-4FC8-AB21-9E5337E5DCFA", "9D458289-1538-48F0-B929-552EA216C8CA", "F54E8E4C-BBCB-436D-AFBB-236CEBF7F559", "FD05C00F-B81F-4108-84E3-38206043F71E", "5C82D9B2-50C4-4DB9-BD80-66140FC9B82D", "9EE686C0-D469-4FE9-BE10-AFF403FF115B", "79397C45-E403-4EC9-ABCA-C804CC124726", "A47118E4-AAB4-4008-8515-77FAA8AB73E6", "528D4D60-0847-4BF2-8A00-269246A49CA6", "EA3C83F0-11C6-4942-9E77-A74E2657A63B", "A63FE7AF-1B3B-46F8-AD8A-E479569A56E4", "D1D0465E-DA40-403A-904C-59F0E2419F81", "C3ED09AF-B799-4504-AE25-4BA49FAC175A", "8ED3AEB2-2FE1-4F11-B900-E1E16C506FCD", "168EB6BB-77A2-4EA7-9C4A-396A282DA683", "CADE4C3C-1C80-4D3C-81B3-B39C24034382", "3FF29D99-C298-4AAF-AB83-A0350A320E6B", "F9974FC7-6570-4398-94FE-17B85A64BFF6", "917744A7-4530-4041-871F-4A744F1FCBD8", "E4E79550-A22A-4891-B435-97409F25C5D5" };
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindWokstationsAndTests();
                BindWokstationsAndTests_To_Tab2();
            }
        }
    
        protected void BindWokstationsAndTests()
        {
    
            Coolite.Ext.Web.Panel pnlAllTests = new Coolite.Ext.Web.Panel();
            pnlAllTests.Title = "Multi Test Charts";
            pnlAllTests.Border = false;
            pnlAllTests.Collapsed = true;
            pnlAllTests.Icon = Coolite.Ext.Web.Icon.Map;
            ContainerLayout layout = new ContainerLayout();
            pnlAllTests.BodyControls.Add(layout);
    
            Coolite.Ext.Web.Panel pnlCbg = new Coolite.Ext.Web.Panel();
            pnlCbg.Collapsible = false;
            pnlCbg.Height = new Unit(300);
            pnlCbg.AutoScroll = true;
            ContainerLayout layout1 = new ContainerLayout();
            pnlCbg.BodyControls.Add(layout1);
            layout.Items.Add(pnlCbg);        
            
            Coolite.Ext.Web.CheckboxGroup cbgAllTests;
            cbgAllTests = new Coolite.Ext.Web.CheckboxGroup();
            cbgAllTests.AllowBlank = false;
            cbgAllTests.AutoHeight = true;
            cbgAllTests.ColumnsNumber = 1;
            layout1.Items.Add(cbgAllTests);
            
    
            Coolite.Ext.Web.Button btnCTS = new Coolite.Ext.Web.Button();
            btnCTS.Text = "Select Tests";
    
            btnCTS.Listeners.Click.Handler = "showMultiChart(#{tbpTop});";
            layout.Items.Add(btnCTS);
    
            Coolite.Ext.Web.Button btnCTSMultiResults = new Coolite.Ext.Web.Button();
            btnCTSMultiResults.Text = "Multiple Results";
            btnCTSMultiResults.Listeners.Click.Handler = "showMultiResultChart(#{tbpTop})";
            layout.Items.Add(btnCTSMultiResults);
    
            //Adding to multi chart check box group 
    
            int uniuqeId = 0;
            foreach (string eachTest in arrTests)
            {
                Coolite.Ext.Web.Checkbox chkTest = new Coolite.Ext.Web.Checkbox();
                //chkTest.ID = "ct_" + i.ToString() + "_" + j.ToString();
                chkTest.ID = "CItem_" + uniuqeId.ToString();
                chkTest.BoxLabel = eachTest.ToString();
                cbgAllTests.Items.Add(chkTest);
                uniuqeId++;
            }
            this.Accordion1.Items.Add(pnlAllTests);
        }
    
        protected void BindWokstationsAndTests_To_Tab2()
        {
    
            Coolite.Ext.Web.Panel pnlAllTests2 = new Coolite.Ext.Web.Panel();
            pnlAllTests2.Title = "Multi Test Charts";
            pnlAllTests2.Border = false;
            pnlAllTests2.Collapsed = true;
            pnlAllTests2.Icon = Coolite.Ext.Web.Icon.Map;
            ContainerLayout layout = new ContainerLayout();
            pnlAllTests2.BodyControls.Add(layout);
    
            Coolite.Ext.Web.Panel pnlCbg2 = new Coolite.Ext.Web.Panel();
            pnlCbg2.Collapsible = false;
            pnlCbg2.Height = new Unit(300);
            ContainerLayout layout1 = new ContainerLayout();
            pnlCbg2.BodyControls.Add(layout1);
            layout.Items.Add(pnlCbg2);
            
            pnlCbg2.AutoScroll = true;
            Coolite.Ext.Web.CheckboxGroup cbgAllTests2;
            cbgAllTests2 = new Coolite.Ext.Web.CheckboxGroup();
            cbgAllTests2.AllowBlank = false;
            cbgAllTests2.AutoHeight = true;
            cbgAllTests2.ColumnsNumber = 1;
            layout1.Items.Add(cbgAllTests2);
    
            Coolite.Ext.Web.Button btnCTS2 = new Coolite.Ext.Web.Button();
            btnCTS2.Text = "Select Tests";
    
            btnCTS2.Listeners.Click.Handler = "showMultiChart(#{tbpTop});";
            layout.Items.Add(btnCTS2);
    
            Coolite.Ext.Web.Button btnCTSMultiResults2 = new Coolite.Ext.Web.Button();
            btnCTSMultiResults2.Text = "Multiple Results";
            btnCTSMultiResults2.Listeners.Click.Handler = "showMultiResultChart(#{tbpTop})";
            layout.Items.Add(btnCTSMultiResults2);
    
            //Adding to multi chart check box group 
    
            int uniuqeId = 0;
            foreach (string eachTest in arrTests)
            {
                Coolite.Ext.Web.Checkbox chkTest2 = new Coolite.Ext.Web.Checkbox();
                //chkTest.ID = "ct_" + i.ToString() + "_" + j.ToString();
                chkTest2.ID = "CItem2_" + uniuqeId.ToString();
                chkTest2.BoxLabel = eachTest.ToString();
                //chkTest2.AdditionalConfig = arrTestId[uniuqeId].ToString();
                cbgAllTests2.Items.Add(chkTest2);
                uniuqeId++;
            }
            this.Accordion2.Items.Add(pnlAllTests2);
        }
        </script>
        
        <script type="text/javascript">
            function maximizePortlet(portlet){
                portlet.originalPlacement = {owner : portlet.ownerCt, index : portlet.ownerCt.items.indexOf(portlet), height: portlet.getHeight()};
                MaxizimizeArea.add(portlet);
                portlet.header && portlet.header.addClass("x-hidden");
                CenterPanel.getLayout().setActiveItem(1);
                MaxizimizeArea.doLayout();
            }
            
            function minimizePortlet(){
                var portlet = MaxizimizeArea.items.get(0);
                portlet.header && portlet.header.removeClass("x-hidden");
                delete portlet.anchorSpec;
                portlet.originalPlacement.owner.insert(portlet.originalPlacement.index, portlet);
                portlet.setHeight(portlet.originalPlacement.height);
                CenterPanel.getLayout().setActiveItem(0);
                portlet.originalPlacement.owner.doLayout();
                delete portlet.originalPlacement;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server">
            </ext:ScriptManager>
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout11" runat="server">
                        <West Collapsible="true" MinWidth="100" MaxWidth="300" Split="true" CollapseMode="Mini">
                            <ext:Panel ID="Panel2" runat="server" Width="205" Title="Tab{1}/Tab{2}/Tab{3}">
                                <Body>
                                    <ext:FitLayout ID="FitLayout1" runat="server">
                                        <ext:TabPanel runat="server" ActiveTabIndex="0" Border="false" TabPosition="Bottom"
                                            Title="Title">
                                            <tabs>
                                                    <ext:Tab runat="server" Title="Tab{1}">
                                                        <Body>
                                                        <ext:Accordion ID="Accordion1" runat="server" Animate="true">
                                                           
                                                            </ext:Accordion>
                                                        </Body>
                                                    </ext:Tab>
                                                    <ext:Tab runat="server" Title="Tab{2}" >
                                                        <Body>
                                                            <ext:Accordion ID="Accordion2" runat="server" Animate="true">
                                                           
                                                            </ext:Accordion>
                                                            
                                                        </Body>
                                                    </ext:Tab>
                                                    <ext:Tab runat="server" Title="Tab{3}" id="tbAcc2" >
                                                        <Body>
                                                        </Body>
                                                    </ext:Tab> 
                                                </tabs>
                                        </ext:TabPanel>
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                        </West>
                        <Center>
                            <ext:Panel ID="CenterPanel" runat="server" Border="false" ActiveIndex="0">
                                <Body>
                                    <ext:CardLayout runat="server">                                    
                                    
                            <ext:Portal ID="Portal1" runat="server" Title="Portal">
                                <Body>
                                    <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                                        <ext:LayoutColumn ColumnWidth=".33">
                                            <ext:PortalColumn ID="PortalColumn1" runat="server" StyleSpec="padding:10px 0 10px 10px">
                                                <Body>
                                                    <ext:AnchorLayout ID="AnchorLayout1" runat="server">
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Portlet ID="Portlet1" runat="server" Title="Portlet 1" Height="200px" Html="Portlet1">
                                                                <Tools>
                                                                    <ext:Tool Type="Maximize" Handler="maximizePortlet(#{Portlet1});" />
                                                                </Tools>
                                                            </ext:Portlet>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Portlet ID="Portlet2" runat="server" Title="Portlet 2" Height="200px" Html="Portlet2">
                                                                <Tools>
                                                                    <ext:Tool Type="Maximize" Handler="maximizePortlet(#{Portlet2});" />
                                                                </Tools>
                                                            </ext:Portlet>
                                                        </ext:Anchor>
                                                    </ext:AnchorLayout>
                                                </Body>
                                            </ext:PortalColumn>
                                        </ext:LayoutColumn>
                                        <ext:LayoutColumn ColumnWidth=".33">
                                            <ext:PortalColumn ID="PortalColumn2" runat="server" StyleSpec="padding:10px 0 10px 10px">
                                                <Body>
                                                    <ext:AnchorLayout ID="AnchorLayout2" runat="server">
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Portlet ID="Portlet3" runat="server" Title="Portlet 3" Height="200px" Html="Portlet3">
                                                                <Tools>
                                                                    <ext:Tool Type="Maximize" Handler="maximizePortlet(#{Portlet3});" />
                                                                </Tools>
                                                            </ext:Portlet>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Portlet ID="Portlet4" runat="server" Title="Portlet 4" Height="200px" Html="Portlet4">
                                                                <Tools>
                                                                    <ext:Tool Type="Maximize" Handler="maximizePortlet(#{Portlet4});" />
                                                                </Tools>
                                                            </ext:Portlet>
                                                        </ext:Anchor>
                                                    </ext:AnchorLayout>
                                                </Body>
                                            </ext:PortalColumn>
                                        </ext:LayoutColumn>
                                        <ext:LayoutColumn ColumnWidth=".33">
                                            <ext:PortalColumn ID="PortalColumn3" runat="server" StyleSpec="padding:10px">
                                                <Body>
                                                    <ext:AnchorLayout ID="AnchorLayout3" runat="server">
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Portlet ID="Portlet5" runat="server" Title="Portlet 5" Height="200px" Html="Portlet5">
                                                                <Tools>
                                                                    <ext:Tool Type="Maximize" Handler="maximizePortlet(#{Portlet5});" />
                                                                </Tools>
                                                            </ext:Portlet>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Portlet ID="Portlet6" runat="server" Title="Portlet 6" Height="200px" Html="Portlet6">
                                                                <Tools>
                                                                    <ext:Tool Type="Maximize" Handler="maximizePortlet(#{Portlet6});" />
                                                                </Tools>
                                                            </ext:Portlet>
                                                        </ext:Anchor>
                                                    </ext:AnchorLayout>
                                                </Body>
                                            </ext:PortalColumn>
                                        </ext:LayoutColumn>
                                    </ext:ColumnLayout>
                                </Body>
                            </ext:Portal>
                            
                            <ext:Panel ID="MaxizimizeArea" runat="server">
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:ToolbarFill />
                                            <ext:ToolbarButton runat="server" Text="Close">
                                                <Listeners>
                                                    <Click Fn="minimizePortlet" />
                                                </Listeners>
                                            </ext:ToolbarButton>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Body>
                                    <ext:FitLayout runat="server">                                
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                            
                            </ext:CardLayout>
                                </Body>
                            </ext:Panel>
                        </Center>
                        <North Collapsible="True" Split="True" CollapseMode="Mini">
                            <ext:Panel ID="npMain" runat="server" Height="80px" IDMode="Legacy">
                                <Body>
                                </Body>
                            </ext:Panel>
                        </North>
                      
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
        </form>
    </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. [CLOSED] Dynamic Panel Creation
    By state in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 21, 2009, 2:19 PM
  2. [CLOSED] Desktop dynamic window creation
    By llusetti in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 07, 2009, 6:16 AM
  3. Dynamic Portal Creation
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 0
    Last Post: Jan 21, 2009, 5:53 PM
  4. [CLOSED] Dynamic window creation
    By peterdiplaros in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 13, 2009, 3:16 PM
  5. Dynamic Creation Of Controls
    By Steve in forum 1.x Help
    Replies: 4
    Last Post: Dec 01, 2008, 5:46 PM

Posting Permissions