What's New?

Horizontal Accordion V2.0

Page 2 of 2 FirstFirst 12
  1. #11
    Nov 15, 2012, 11:04 AM
    I think it should be possible.

    1. Remove AnimCollapse="false"

    2. Re-work the JavaScript to expand a Panel when the rest ones are actually collapsed (i.e. after animation)
  2. #12
    Nov 16, 2012, 9:11 AM
    Hi Daniil,

    When i remove the AnimCollapse and when i don't change anything to the javascript. Then the collapsing isn't working correct anymore.
    It still calls the .collapse in the javascript, but it's not executed in the browser.

    Regards
  3. #13
    Nov 16, 2012, 9:21 AM
    Please review.

    Quote Originally Posted by Daniil View Post
    2. Re-work the JavaScript to expand a Panel when the rest ones are actually collapsed (i.e. after animation)
  4. #14
    Nov 16, 2012, 12:29 PM
    Yes i saw this one, but i don't understand. Because the collapse is already called.
    When do i need to do the collapse then?

    Kind Regards
  5. #15
    Nov 20, 2012, 11:34 AM
    Well, the main point in my statement is:
    (i.e. after animation)
    If a collapse call occurs before animation stops, it breaks the things.

    So, it needs to call the collapse method after animation.
  6. #16
    Jun 27, 2013, 8:10 PM
    This is an older thread but I have the same requirement to use a horizontal accordion layout. The proposed code does have the basic behaviour of the accordion but it's missing the visual cues of the accordion, the +/- icons, and some behaviours such as opening up the next panel when the current panel is collapsed or the previous one if it's the last panel being collapsed...

    I am trying to get the +/- icons to be displayed.

    If I add a minus tool to the panels and code to collapse the panel on click, how can I get the plus tool to show on the collapsed header?

    I noticed that if I change the markup to show the collapse tool instead, I get a collapse-left and expand-right icon, almost what I want, but I can't get to change the icons to +/- and I would also have to override the normal code for collapse/expand...

    Thanks,
    Vincent
  7. #17
    Jun 27, 2013, 11:43 PM
    Hello!

    Quote Originally Posted by vgvallee View Post
    This is an older thread but I have the same requirement to use a horizontal accordion layout. The proposed code does have the basic behaviour of the accordion but it's missing the visual cues of the accordion, the +/- icons, and some behaviours such as opening up the next panel when the current panel is collapsed or the previous one if it's the last panel being collapsed...

    I am trying to get the +/- icons to be displayed.

    If I add a minus tool to the panels and code to collapse the panel on click, how can I get the plus tool to show on the collapsed header?

    I noticed that if I change the markup to show the collapse tool instead, I get a collapse-left and expand-right icon, almost what I want, but I can't get to change the icons to +/- and I would also have to override the normal code for collapse/expand...

    Thanks,
    Vincent
    Since, your requirements are different and you are a Premium Member, it's better to start a new thread.
    Last edited by Baidaly; Jun 28, 2013 at 12:07 AM.
  8. #18
    Jun 28, 2013, 2:34 AM
    I modified Daniil's sample. You can use it to start:

    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
 
    <script type="text/javascript">
        var onRender = function (panel)     {
            var leftDockedItems = panel.getDockedItems("header[dock='left']"),
                leftDockedItem;

            if (leftDockedItems.length > 0) {
                leftDockedItem = leftDockedItems[0];
                leftDockedItem.on("click", onLeftDockedItemClick, panel);
                
                var task = new Ext.util.DelayedTask(function () {
                    leftDockedItem.addTool({
                        "type": "left",
                        listeners: {
                            click: {
                                fn: onLeftDockedItemClick,
                                scope: panel
                            }
                        }
                    });
                });
                task.delay(10);
                
            } else {
                panel.on("collapse", onRender, panel, { single: true });
            }
        };

        var onLeftDockedItemClick = function () {
            var me = this;

            me.ownerCt.items.each(function (item) {
                if (me !== item && item.collapse && !item.collapsed) {
                    item.collapse();
                }
            });
            me.expand();
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" SourceFormatting="True" />
     
    <ext:Window runat="server" Width="600" Height="150">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="2 0" />
        </LayoutConfig>
        <Items>
            <ext:Panel
                runat="server"
                ID="Panel1"
                Flex="1"
                Title="Panel 1"
                CollapseDirection="Left"
                HideCollapseTool="true"
                AnimCollapse="false">
                <Listeners>
                    <Render Fn="onRender" />
                </Listeners>
                <HeaderConfig TitlePosition="0">
                    <Items>
                        <ext:Tool runat="server" Type="Left"></ext:Tool>
                    </Items>
                </HeaderConfig>
            </ext:Panel>
 
            <ext:Panel
                runat="server"
                ID="Panel2"
                Flex="1"
                Title="Panel 2"
                CollapseDirection="Left"
                HideCollapseTool="true"
                Collapsed="true"
                AnimCollapse="false">
                <Listeners>
                    <Render Fn="onRender" />
                </Listeners>
                <HeaderConfig TitlePosition="0">
                    <Items>
                        <ext:Tool runat="server" Type="Left"></ext:Tool>
                    </Items>
                </HeaderConfig>
            </ext:Panel>
 
            <ext:Panel
                runat="server"
                ID="Panel3"
                Flex="1"
                Title="Panel 3"
                CollapseDirection="Left"
                HideCollapseTool="true"
                Collapsed="true"
                AnimCollapse="false">
                <Listeners>
                    <Render Fn="onRender" />
                </Listeners>
                <HeaderConfig TitlePosition="0">
                    <Items>
                        <ext:Tool runat="server" Type="Left"></ext:Tool>
                    </Items>
                </HeaderConfig>
            </ext:Panel>
        </Items>        
    </ext:Window>
</body>
</html>
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Is there a horizontal list component ?
    By ashwinrath in forum 1.x Help
    Replies: 0
    Last Post: Apr 29, 2012, 6:52 PM
  2. Why has every page in IE6 horizontal scroll bar
    By benti in forum 1.x Help
    Replies: 2
    Last Post: Aug 18, 2011, 2:11 PM
  3. Accordion align in Viewport, bottom accordion item is cutted
    By Paul D in forum 1.x Help
    Replies: 5
    Last Post: Nov 11, 2010, 7:33 PM
  4. Listview horizontal scroll bar
    By wh0urdady in forum 1.x Help
    Replies: 1
    Last Post: Jun 23, 2010, 10:41 PM
  5. Horizontal BorderRegion Alignment Bug?
    By sbarnes in forum 1.x Help
    Replies: 2
    Last Post: Aug 09, 2009, 11:28 PM

Tags for this Thread

Posting Permissions