View Full Version : Accordion Layout with Multi and Re-size capabilities

9 Mar 2012, 10:35 AM
Hi all -

I'll start off by saying that I'm new to ExtJS and these forums, so please accept my apologies if my question has already been asked/answered here or if I'm putting it in the wrong place.

I have a project in which I have the following panel and child panels:

var myPanel = Ext.create('Ext.panel.Panel', {
title: 'My Panel',
width: 600,
height: 400,
renderTo: Ext.getBody(),
//defaults: { resizable: true },
layout: {
type: 'accordion',
multi: true
items: [{
title: 'Panel 1',
html: 'Panel content!'
}, {
title: 'Panel 2',
html: 'Panel content!'
}, {
title: 'Panel 3',
html: 'Panel content!'

This is working great as an Accordion that allows multiple open panels. What I'd like to add to this is the ability to re-size the child panels. My thought was to create a custom layout class that extends Ext.layout.AccordionLayout, so I tried this:

Ext.define('myNamespace.AccordionPlus', {
extend: 'Ext.layout.container.Accordion',
alias: 'layout.accordionplus',



and then changing the 'layout' config in 'My Panel' to be:

layout: {
type: 'accordionplus',
multi: true

I've been getting JS errors as a result of this, however, and before I spend too much time debugging the error, I wanted to make sure I was even headed down the right path. So, is this the best way to get an Accordion layout, multi-enabled, that has re-size capability?

Thanks in advance for your help!

9 Mar 2012, 12:20 PM
You want the parent panel to resize to the children that are expanded?

9 Mar 2012, 12:49 PM
No. I want to be able to use drag handles to resize the open child panels inside an Accordion layout. For example, with 3 panels (P1,P2,P3) sharing a height of 90:
- P1 is expanded by default to height 90 (current functionality)
- I expand P2
- layout sets both to height 45 (current functionality)
- I hover over the north edge of P2, and drag upwards until P2 has height 60
- layout sets P1 to height 30, P2 to height 60

Does that make sense?

13 Mar 2012, 5:55 AM
UPDATE: I managed to get 'My Panel' to accept the custom layout class, but right now that class is just a shell. I still need to figure out how to have AccordionPlus accept the resize events that are fired by the Resizers on the child panels.

Any ideas??