[CLOSED] [1.0] Accordion Collapse Delay?

MP · Aug 03, 2010, 4:33 PM

Hi,

Is it possible to add a collapse/expand delay on accordion panel, much like the borderlayout collapse/expand delay?

Thanks,
Marcelo

**geoffrey.mcgill** · Aug 03, 2010, 5:19 PM

Originally Posted by MP

much like the borderlayout collapse/expand delay?

Please explain? I'm not sure which property(s) you are referring to on the BorderLayout.

MP · Aug 03, 2010, 6:28 PM

Hi,

By default, panels on BorderLayout collapses with animation. Just want to know if this behavior can be applied on Accordion panels. I tried setting AnimCollapse="true" on accordion but I cant seem to make the accordion panels animate on collapse.

Thanks,
Marcelo

**geoffrey.mcgill** · Aug 03, 2010, 6:50 PM

Hi Marcelo,

You can set Animate="true" on the <ext:AccordionLayout> control, or set within the <LayoutConfig>. Default value is false.

Example

<ext:Window 
    ID="Window1" 
    runat="server" 
    Title="Accordion"
    Width="250"
    Height="400"
    Maximizable="true"
    BodyBorder="false"
    Icon="ApplicationTileVertical"
    Layout="Accordion">
    <LayoutConfig>
        <ext:AccordionLayoutConfig Animate="true" />
    </LayoutConfig>
    <Items>
        <ext:Panel runat="server" Title="Settings" />
        <ext:Panel runat="server" Title="Even More Stuff" />
        <ext:Panel runat="server" Title="My Stuff" />
    </Items>
</ext:Window>

More information available at

http://www.sencha.com/deploy/dev/doc...member=animate

Hope this helps.

MP · Aug 03, 2010, 7:01 PM

Hi Geoffrey,

It works! I appreciate your help on this :).

Please mark as closed.

Regards,
Marcelo

**geoffrey.mcgill** · Aug 03, 2010, 7:08 PM

I should point out, if you <AutoLoad> any of the inner Accordion Panels with an <iframe>, your might experience a reloading of the <iframe> when the Panel is expanded/collapsed. If this happens, the fix is to remove the Accordion Layout Animation.

Hope this helps.

**anup** · Aug 23, 2010, 3:41 PM

Originally Posted by geoffrey.mcgill

Hi Marcelo,

You can set Animate="true" on the <ext:AccordionLayout> control, or set within the <LayoutConfig>. Default value is false.

Hi Geoffrey,

I just got latest 1.0 code from SVN today (August 23, 2010) and begun upgrading my 0.8.2 project to 1.0.

On the whole very smooth upgrade (well done). Had a couple of issues with AccordionLayout:

1) Setting Animate="true" on <ext:AccordionLayout> does NOT work, but setting within the <LayoutConfig> of a Panel with Layout="Accordion" does work.

2) When inside a border layout's region, the accordion layout ends up getting a blank title at the top of the region which did not happen before in 0.8.2.

Code example using Accordion element with Animate="true":

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Accordion.aspx.cs" Inherits="Ext.Net.Tests.Layout.Accordion" %>
 
<!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 example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
    <form id="form1" runat="server">
    <div>
        <ext:Viewport runat="server">
            <Content>
                <ext:BorderLayout runat="server">
                    <North>
                        <ext:Panel Title="Header" runat="server" Height="70" Split="false">
                            <Content>
                                <p>{Branding header area}</p>
                            </Content>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel Title="Main Content" runat="server">
                            <Content>
                                <p>{Main content area}</p>
                                <p>Problems:</p>
                                <ul>
                                    <li>Blank title now appears (didn't appear in 0.8.2)</li>
                                    <li>Even though Animate="true" is set on AccordionLayout, it doesn't animate</li>
                                </ul>
                            </Content>
                        </ext:Panel>
                    </Center>
                    <West MinWidth="155" MaxWidth="400" Split="true" Collapsible="true" Floatable="false">
                        <ext:Panel ID="WestPanel" runat="server" Width="225" TitleCollapse="true">
                            <Content>
                                <ext:AccordionLayout ID="Accordion1" runat="server" Animate="true">
                                    <Items>
                                        <ext:Panel ID="Panel1" runat="server" Title="Panel 1" Icon="Table" Border="false" Cls="content-panel" AutoScroll="True">
                                            <Content>
                                                {Panel 1}
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel2" runat="server" Title="Panel 2" Icon="FolderGo" Border="false" Cls="content-panel" AutoScroll="True">
                                            <Content>
                                                {Panel 2}
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel3" runat="server" Title="Panel 3" Icon="Magnifier" Border="false" Cls="content-panel" AutoScroll="True">
                                            <Content>
                                                {Panel 3}
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel4" runat="server" Title="Panel 4" Icon="Cog" Border="false" Cls="content-panel filters" AutoScroll="True">
                                            <Content>
                                                {Panel 4}
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel5" runat="server" Title="Panel 5" Border="false" Cls="content-panel" Icon="PageWhiteWrench" AutoScroll="True">
                                            <Content>
                                                {Panel 5}
                                            </Content>
                                        </ext:Panel>
                                    </Items>
                                </ext:AccordionLayout>
                            </Content>
                        </ext:Panel>
                    </West>
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>

Here's the example where animate works, using Panel's layout attribute instead, but the blank title still appears:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Accordion.aspx.cs" Inherits="Ext.Net.Tests.Layout.Accordion" %>
 
<!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 id="Head1" runat="server">
    <title>Accordion example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
    <form id="form1" runat="server">
    <div>
        <ext:Viewport ID="Viewport1" runat="server">
            <Content>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North>
                        <ext:Panel ID="Panel1" Title="Header" runat="server" Height="70" Split="false">
                            <Content>
                                <p>{Branding header area}</p>
                            </Content>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel ID="Panel2" Title="Main Content" runat="server">
                            <Content>
                                <p>{Main content area}</p>
                                <p>Problems:</p>
                                <ul>
                                    <li>Switching to Panel with Layout="config" works but blank title still appears (not there in 0.8.2)</li>
                                    <li>When Collapsible = "true" the panel's header appears</li>
                                </ul>
                            </Content>
                        </ext:Panel>
                    </Center>
                    <West MinWidth="155" MaxWidth="400" Split="true" Collapsible="true" Floatable="false">
                        <ext:Panel ID="WestPanel" Layout="Accordion" runat="server" Width="225" TitleCollapse="true">
                            <Items>
                                <ext:Panel ID="Panel3" runat="server" Title="Panel 1" Icon="Table" Border="false" Cls="content-panel" AutoScroll="True">
                                    <Content>
                                        {Panel 1}
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="Panel4" runat="server" Title="Panel 2" Icon="FolderGo" Border="false" Cls="content-panel" AutoScroll="True">
                                    <Content>
                                        {Panel 2}
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="Panel5" runat="server" Title="Panel 3" Icon="Magnifier" Border="false" Cls="content-panel" AutoScroll="True">
                                    <Content>
                                        {Panel 3}
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="Panel6" runat="server" Title="Panel 4" Icon="Cog" Border="false" Cls="content-panel filters" AutoScroll="True">
                                    <Content>
                                        {Panel 4}
                                    </Content>
                                </ext:Panel>
                                <ext:Panel ID="Panel7" runat="server" Title="Panel 5" Border="false" Cls="content-panel" Icon="PageWhiteWrench" AutoScroll="True">
                                    <Content>
                                        {Panel 5}
                                    </Content>
                                </ext:Panel>
                            </Items>
                            <LayoutConfig>
                                <ext:AccordionLayoutConfig Animate="true" />
                            </LayoutConfig>
                        </ext:Panel>
                    </West>
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>

Any suggestions?

**Daniil** · Aug 24, 2010, 7:03 AM

Hello!

2) When inside a border layout's region, the accordion layout ends up getting a blank title at the top of the region which did not happen before in 0.8.2.

I can't see Title property applied to a region panel. Maybe this applied to your example would be a solution?

<ext:Panel ID="WestPanel" runat="server" Width="225" TitleCollapse="true" Title="West Panel">

1) Setting Animate="true" on <ext:AccordionLayout> does NOT work, but setting within the <LayoutConfig> of a Panel with Layout="Accordion" does work.

It seems there is an issue with AccordionLayout control. Thanks for the report. We're investigating.

Example

<%@ Page Language="C#" %>

<!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>Animate issue - Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />    
    <ext:Viewport runat="server" Layout="border">
        <Items>
            <ext:Panel runat="server" Region="Center" />
            <ext:Panel 
                runat="server" 
                Region="West"
                Title="West"
                Width="500" 
                Layout="accordion">
                <LayoutConfig>
                    <ext:AccordionLayoutConfig Animate="true" />
                </LayoutConfig>
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Panel 1" 
                        Html="Layout + LayoutConfig = animate works"/>
                    <ext:Panel runat="server" Title="Panel 2" />
                </Items>
            </ext:Panel>
            <ext:Panel 
                runat="server" 
                Region="East" 
                Title="EastPanel Animate doesn't work" 
                Width="500">
                <Items>
                    <ext:AccordionLayout runat="server" Animate="true">
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Title="Panel 1" 
                                Html="AccordionLayout + property Animate = animate doesn't work"/>
                            <ext:Panel runat="server" Title="Panel 2" />
                        </Items>
                    </ext:AccordionLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**anup** · Aug 24, 2010, 8:56 AM

Originally Posted by Daniil

Hello!

I can't see Title property applied to a region panel. Maybe this applied to your example would be a solution?

<ext:Panel ID="WestPanel" runat="server" Width="225" TitleCollapse="true" Title="West Panel">

Hi,

Thanks for replying (and looking into the Accordion issue).

The example above, of putting a Title in is not what I am trying to do -- in 0.8.2, I could intentionally leave out the title and it would not render the title area, but now it always is (I think this is happening when inside a border layout as I notice it is not always when there is Accordion).

Update: I was going to create a separate thread for this, but in the process of creating a cut down example for it, I found you can just use Header="false" in the Panel that is inside a given region -- It is probably good that it is explicit, but given that is different from 0.8.2, it may be worth noting in the change log?

Anup

**Vladimir** · Aug 24, 2010, 12:22 PM

Hi,

Animate issue is fixed. Please update from SVN

Thread: [CLOSED] [1.0] Accordion Collapse Delay?

Thread Tools

Search Thread

Display

[CLOSED] [1.0] Accordion Collapse Delay?

Animate="true" on ext:AccordionLayout does not work

Similar Threads

[CLOSED] Collapse all Accordion children

[CLOSED] Collapse unique accordion´s child when Multi config is set to true.

[CLOSED] FieldSet graphic (icon for expand / collapse) bottom border line is not showing in google chrome while collapse.

Custom collapse/expand icons for accordion layout panesl

Accordion align in Viewport, bottom accordion item is cutted

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [1.0] Accordion Collapse Delay?

[CLOSED] [1.0] Accordion Collapse Delay?

Animate="true" on ext:AccordionLayout does not work

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us