Extjs Accordion Layout

Question

An accordion layout is a stacked panel layout in which only one panel is visible in time, but I wanted to show two panels visible in time, so that we can do this with the accordion panel ??

Answer 1

You cannot extend the existing Accordion layout class to achieve what you are looking for. If you look at the source code, you will notice that the layout of the Accordion is created by extending FitLayout. Now I quote the FitLayout property in the documentation:

This is the base class for layouts that contain one element that automatically expands to fill the container layout.

The documentation further states:

If the container has several panels, only the first will be displayed.

Now, as the question asks, you need to simultaneously display two panels. This is simply not possible with any layout extending from FitLayout.

Other questions:

There are some design issues with the component that the planner plans to implement;

• What about the space will be displayed at the moment?
• How will the accordion work? When a user tries to access the third panel .. how the currently open panels behave.

Possible Solution:

Now one of the possible solutions is to expand the panel with the vbox layout and to have all the panels in it.

Answer 2

In Ext js 4.1, you can use the multi property in the Accordion layout.

Check out the docs here.

Answer 3

I am sure you cannot do this with an existing AccordionLayout.

You can write your own layout class to do this. It's not that complicated, AccordionLayout.js is just a few pages, and most of them are comments.

Answer 4

The accordion layout is not intended for this. Choosing the right layout for your requirement is like trying to put a sphere in a rectangle.

However, if you put a gun on your head, I will quickly think about the following options.

• Extend an existing Accordion class (Cancel. Since the base is not intended for this)
• Write your own magical accordion (in addition to implementation, you must answer Abdel Olakar, the problems mentioned, your "I").
• Imitate your desired behavior by folding two or more Accordions (well, not a good idea, but a gun on my head).