PDA

View Full Version : confined accordion with scrollbars won't expand



sschmitt
19 Jan 2011, 2:39 PM
You should be able to try out this example by pasting it into the Console of your firebug. Note that although we can scroll up and down to see all panels, we cannot expand them. If you want to see them expand, you have to turn autoHeight to true, or make the height bigger than 100.

How can I have a confined-height accordion that has a scrollbar yet has the ability to expand? I hope I don't have to implement Saki's 1335 lines of code (http://www.aariadne.com/accordion/) to make this simple thing work.



Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel(
{
id: 'accoParent',
renderTo: 'test',
width: 200,
title: 'accoParent',
height: 100,
//autoHeight: true,
autoScroll: true,
layout: 'accordion',
layoutConfig: { animate: true, fill: true },
items: [
{xtype:'panel',title:'panl1',html:'Michael', layout:'fit'},
{xtype:'panel',title:'panl2',html:'Lindsey', layout:'fit'},
{xtype:'panel',title:'panl3',html:'Gob', layout:'fit'},
{xtype:'panel',title:'panl4',html:'Buster', layout:'fit'},
{xtype:'panel',title:'panl5',html:'Tobias', layout:'fit'}
]
});

sschmitt
21 Jan 2011, 9:09 AM
No ideas?

sschmitt
21 Jan 2011, 1:55 PM
down in the items,
{xtype:'panel',title:'panl1',html:'Michael', layout:'fit'},
if we put the autoHeight property, it seems to correct the problem. In the case of my actual code it makes the height way too high for the content, but one small step at a time, eh?

aconran
21 Jan 2011, 3:47 PM
sschmitt -

This is an interesting limitation of the 2-3.x accordion... We'll take a look at getting this addressed in Ext 4 as we're reviewing the accordion right now.

Basically the container that uses the accordion layout must be taller than the heights of all the titles inside of the container. If you adjust this to something like height: 160 and drop the autoScroll it should work.

(Side note, drop the layout: 'fit's in the child panels that you have html in.)