[CLOSED] Coolite examples

  1. #1

    [CLOSED] Coolite examples

    I´ve got an application with the old dll of coolite and I need to create a page similar to the portal example availble at: https://examples1.ext.net/#/Portal/Basic/Simple/

    But the accordion layout is not supported in the old dll. Is there an alternative to do something like that without updating the dll?
    Is there any way to access and see the old examples page?

    Thanks.

    Ariel
    Last edited by Daniil; Nov 08, 2010 at 8:51 PM. Reason: [CLOSED]
  2. #2
    Hi,

    What version do you use? Please note that in 0.8.x version AccordionLayout is called Accordion (without Layout suffix)
  3. #3
    Quote Originally Posted by Vladimir View Post
    Hi,

    What version do you use? Please note that in 0.8.x version AccordionLayout is called Accordion (without Layout suffix)
    Yes I´m using 0.8.2 dll. I´ve change to Accordion and it works but now it says that the items property cannot be stablished by declaration.
    Is there any place to see an accordion example with the 0.8.x dll?
  4. #4
    Hi,

    <%@ 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>Accordion Layout in Markup - Coolite Toolkit Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <ext:ScriptManager runat="server" />
        
        <h1>Accordion Layout in Markup</h1>
        
        <ext:Window 
            ID="Window1" 
            runat="server" 
            Title="Accordion"
            Width="250"
            Height="400"
            Maximizable="true"
            BodyBorder="false"
            Icon="ApplicationTileVertical">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Icon="Connect">
                            <ToolTips>
                                <ext:ToolTip Title="Rich ToolTips" Html="Let your users know what they can do!" />
                            </ToolTips>
                        </ext:Button>
                        <ext:Button ID="Button2" runat="server" Icon="UserAdd" />
                        <ext:Button ID="Button3" runat="server" Icon="UserDelete" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Body>
                <ext:Accordion ID="AccordionLayout1" runat="server">
                    <ext:TreePanel ID="TreePanel1" runat="server" Title="Online Users" RootVisible="false">
                        <Tools>
                            <ext:Tool Type="Refresh" Handler="Ext.Msg.alert('Message','Refresh Tool Clicked!');" />
                        </Tools>
                        <Root>
                            <ext:TreeNode Text="Root">
                                <Nodes>
                                    <ext:TreeNode Text="Friends" Expanded="true">
                                        <Nodes>
                                            <ext:TreeNode Text="Jack" Icon="User" />
                                            <ext:TreeNode Text="Brian" Icon="User" />
                                            <ext:TreeNode Text="Jon" Icon="User" />
                                            <ext:TreeNode Text="Tim" Icon="User" />
                                            <ext:TreeNode Text="Nige" Icon="User" />
                                            <ext:TreeNode Text="Fred" Icon="User" />
                                            <ext:TreeNode Text="Bob" Icon="User" />
                                        </Nodes>
                                    </ext:TreeNode>
                                    <ext:TreeNode Text="Family" Expanded="true">
                                        <Nodes>
                                            <ext:TreeNode Text="Kelly" Icon="UserFemale" />
                                            <ext:TreeNode Text="Sara" Icon="UserFemale" />
                                            <ext:TreeNode Text="Zack" Icon="UserGreen" />
                                            <ext:TreeNode Text="John" Icon="UserGreen" />
                                        </Nodes>
                                    </ext:TreeNode>
                                </Nodes>
                            </ext:TreeNode>
                        </Root>
                    </ext:TreePanel>
                    <ext:Panel ID="Panel2" runat="server" Title="Settings" />
                    <ext:Panel ID="Panel3" runat="server" Title="Even More Stuff" />
                    <ext:Panel ID="Panel4" runat="server" Title="My Stuff" />
                </ext:Accordion>
            </Body>
        
        </ext:Window>
    </body>
    </html>
  5. #5
    Thanks Vladimir the example of the accordion works but what I need is an example with a colapsible panel on the left and a fixed area on the middle similar to the layou of the new portal example .
  6. #6
    Quote Originally Posted by asztern View Post
    Is there any place to see an accordion example with the 0.8.x dll?
    Hi,

    All 0.8.x examples you can find in sources (open Coolite.Toolkit.sln, see Coolite.Examples project).

    Here is code from there:

    Example
    <%@ Page Language="C#" %>
    <%@ Import Namespace="Coolite.Utilities" %>
    
    <%@ 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">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.";
    
                this.ScriptManager1.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text));
    
                foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
                {
                    portlet.Html = "={text}";
                    portlet.Tools.Add(new Tool(ToolType.Close, string.Concat(portlet.ClientID, ".hide();"), "Close Portlet"));
                }
            }
    
            foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
            {
                portlet.AjaxEvents.Hide.Event += Portlet_Hide;
                portlet.AjaxEvents.Hide.EventMask.ShowMask = true;
                portlet.AjaxEvents.Hide.EventMask.Msg = "Saving...";
                portlet.AjaxEvents.Hide.EventMask.MinDelay = 500;
                
                portlet.AjaxEvents.Hide.ExtraParams.Add(new Coolite.Ext.Web.Parameter("ID", portlet.ClientID));
            }
        }
    
        protected void Portlet_Hide(object sender, AjaxEventArgs e)
        {
            string id = e.ExtraParams["ID"];
            this.ScriptManager1.AddScript("Ext.Msg.alert('Status','" + id + " Hidden');");
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Portal in TabPanel - Coolite Toolkit Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <West 
                            Collapsible="true" 
                            Split="true" 
                            MinWidth="175" 
                            MaxWidth="400" 
                            MarginsSummary="5 0 5 5" 
                            CMarginsSummary="5 5 5 5">
                            <ext:Panel 
                                runat="server" 
                                Title="West" 
                                Width="200" 
                                ID="pnlWest">
                                <Body>
                                    <ext:Accordion runat="server" Animate="true">
                                        <ext:Panel 
                                            ID="pnlContent" 
                                            runat="server" 
                                            Border="false" 
                                            Collapsed="true" 
                                            Icon="Note"
                                            AutoScroll="true"
                                            Title="Content"
                                            Html="={text}"
                                            BodyStyle="padding:5px;"
                                            />
                                        <ext:Panel
                                            ID="pnlSettings"
                                            runat="server" 
                                            Border="false" 
                                            Collapsed="true" 
                                            Icon="FolderWrench" 
                                            AutoScroll="true"
                                            Title="Settings"
                                            Html="={text}"
                                            BodyStyle="padding:5px;"
                                            />
                                    </ext:Accordion>
                                </Body>
                            </ext:Panel>
                        </West>
                        <Center MarginsSummary="5 5 5 0">
                            <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Title="TabPanel">
                                <Tabs>
                                    <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                        <Body>
                                            <ext:FitLayout ID="FitLayout1" runat="server">
                                                <ext:Portal ID="Portal1" runat="server" Border="false">
                                                    <Listeners>
                                                        <Drop Handler="e.panel.el.frame();" />
                                                    </Listeners>
                                                    <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>
                                                                                <ext:Portlet ID="Portlet1" runat="server" Title="Another Panel 1" />
                                                                            </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>
                                                                                <ext:Portlet ID="Portlet2" runat="server" Title="Panel 2" />
                                                                            </ext:Anchor>
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet3" runat="server" Title="Another Panel 2" />
                                                                            </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>
                                                                                <ext:Portlet ID="Portlet4" runat="server" Title="Panel 3" />
                                                                            </ext:Anchor>
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet5" runat="server" Title="Another Panel 3" />
                                                                            </ext:Anchor>
                                                                        </ext:AnchorLayout>
                                                                    </Body>
                                                                </ext:PortalColumn>
                                                            </ext:LayoutColumn>
                                                        </ext:ColumnLayout>    
                                                    </Body>
                                                </ext:Portal>
                                            </ext:FitLayout>
                                        </Body>
                                    </ext:Tab>
                                    <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
                                        <Body>
                                            <ext:FitLayout ID="FitLayout2" runat="server">
                                                <ext:Portal ID="Portal2" runat="server" Border="false">
                                                    <Body>
                                                        <ext:ColumnLayout ID="ColumnLayout2" runat="server">
                                                            <ext:LayoutColumn ColumnWidth=".33">
                                                                <ext:PortalColumn 
                                                                    ID="PortalColumn6" 
                                                                    runat="server" 
                                                                    StyleSpec="padding:10px">
                                                                    <Body>
                                                                        <ext:AnchorLayout ID="AnchorLayout6" runat="server">
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet9" Title="Panel 3" runat="server" />
                                                                            </ext:Anchor>
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet10" Title="Another Panel 3" runat="server" />
                                                                            </ext:Anchor>
                                                                        </ext:AnchorLayout>
                                                                    </Body>
                                                                </ext:PortalColumn>
                                                            </ext:LayoutColumn>
                                                            <ext:LayoutColumn ColumnWidth=".33">
                                                                <ext:PortalColumn 
                                                                    ID="PortalColumn5" 
                                                                    runat="server" 
                                                                    StyleSpec="padding:10px 0 10px 10px">
                                                                    <Body>
                                                                        <ext:AnchorLayout ID="AnchorLayout5" runat="server">
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet7" Title="Panel 2" runat="server" />
                                                                            </ext:Anchor>
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet8" Title="Another Panel 2" runat="server" />
                                                                            </ext:Anchor>
                                                                        </ext:AnchorLayout>
                                                                    </Body>
                                                                </ext:PortalColumn>
                                                            </ext:LayoutColumn>
                                                            <ext:LayoutColumn ColumnWidth=".33">
                                                                <ext:PortalColumn 
                                                                    ID="PortalColumn4" 
                                                                    runat="server" 
                                                                    StyleSpec="padding:10px 0 10px 10px">
                                                                    <Body>
                                                                        <ext:AnchorLayout ID="AnchorLayout4" runat="server">
                                                                            <ext:Anchor>
                                                                                <ext:Portlet ID="Portlet6" Title="Another Panel 1" runat="server" />
                                                                            </ext:Anchor>
                                                                        </ext:AnchorLayout>
                                                                    </Body>
                                                                </ext:PortalColumn>
                                                            </ext:LayoutColumn>
                                                        </ext:ColumnLayout>    
                                                    </Body>
                                                </ext:Portal>                                    
                                            </ext:FitLayout>
                                        </Body>
                                    </ext:Tab>
                                </Tabs>
                            </ext:TabPanel> 
                        </Center>
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Need of Coolite TreePanel 0.8 examples
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 14, 2010, 11:33 AM
  2. Coolite 0.82 examples
    By toinho in forum Open Discussions
    Replies: 1
    Last Post: Jun 24, 2010, 4:38 PM
  3. Coolite Examples Explorer
    By georgelanes in forum Examples and Extras
    Replies: 10
    Last Post: Nov 01, 2009, 5:25 PM
  4. [CLOSED] Coolite.Examples report
    By methode in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 27, 2008, 11:00 AM
  5. [CLOSED] Can't build Coolite.Examples
    By methode in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 21, 2008, 5:56 AM

Posting Permissions