Expand all panel items in accordion layout

  1. #1

    Expand all panel items in accordion layout

    Hi,

    I've got the following code:

    <ext:Panel ID="accordion_panel" Layout="Accordion" runat="server" Border="false">
    								<Items>
    									<ext:Panel ID="products" Collapsed="true" runat="server" Title="Products" Cls="accordion_panel_header"
    										BodyCssClass="accordion_panel_body" OverCls="accordion_panel_header_hover" Border="false"
    										AutoHeight="true">
    										<Content>
    											Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
    											eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
    											montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
    											pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
    											vel, aliquet nec,
    										</Content>
    									</ext:Panel>
    									<ext:Panel ID="order_information" Collapsed="true" runat="server" Title="Order information"
    										Cls="accordion_panel_header" BodyCssClass="accordion_panel_body" OverCls="accordion_panel_header_hover"
    										Border="false" AutoHeight="true">
    										<Content>
    											Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
    											eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
    											montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
    											pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
    											vel, aliquet nec,
    										</Content>
    									</ext:Panel>
    								</Items>
    								<Plugins>
    									<ext:KeepActive runat="server" />
    								</Plugins>
    							</ext:Panel>
    I would like to be able to have all the panels expanded. At the moment, whenever I click on the "+" button, the other panel will collapse if it is in an expanded state.

    I've tried using the Plugins tag but to no avail.

    David
  2. #2
    Hi,

    Here is a quote from ExtJS docs.
    This is a layout that manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
    Doc link
    http://dev.sencha.com/deploy/dev/doc...ccordionLayout

    I'm not sure a plugin to achieve this exists.
  3. #3
    Hi,

    Thanks for that.

    Regards,

    David
  4. #4
    Another option would be to not use the AccordionLayout and just add several Panels to a Container Layout.

    This will not render exactly the same, but it will allow all (or none) of the Panels to be expanded/collapsed.

    Hope this helps.
    Geoffrey McGill
    Founder
  5. #5
    Thanks Geoffrey,

    I'll have to give that a try.

    Regards,

    David

Similar Threads

  1. Replies: 10
    Last Post: May 19, 2011, 7:43 AM
  2. Replies: 11
    Last Post: May 03, 2011, 12:56 PM
  3. Replies: 2
    Last Post: Dec 28, 2010, 9:47 PM
  4. Accordion layout
    By Elie.fakhry in forum 1.x Help
    Replies: 1
    Last Post: Oct 12, 2010, 8:53 PM
  5. Dynamic Accordion Items
    By danr in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2009, 9:13 PM

Tags for this Thread

Posting Permissions