View Full Version : Collapse don't behave normally

19 Feb 2010, 12:02 PM

I have two issue related to the same thing : collapse: 'true'. If I collapse something, it will not render no matter what :( I've read some post on this and I've tried so many things that I'm finally posting this request.
My issues are located in two really precise situation :
- In my collapsible Panel, (it's in a Panel), I set an accordionLayout. When I open the app, everything is fine and as soon as the panel is not collapsed, everything is fine. If I collapse the panel, one or all of the subPanels (contained in the accordion) that was not previously viewed, will have a size that seems to be 0 by 0 (I'll explain what makes me say this later on). By collapsing I mean that : when you collapse a panel and it goes to the side, if you put your mouse on it, it will show. Openning a "none previously viewed panel" at this point will not work.
- In a fieldset in a panel contained inside my accordionlayout, I have some comboboxs. If I pragmatically (by using collapse:true or searchLocationOptions.collapse(true);) collapse the fieldset, I will never be able to see the combobox if i expend the fieldset.

I have tried the forcelayout thing everywhere. I have a work around for my panels in the accordionlayout that looks like this :


Basically, I'm pragmatically opening each of my panels... this will set there size! But, if I resize my window and then collapse the panel with the accordion layout, there size are fixed to first rendering size... sniff

Here is the accordion panel

var AccordionMenuPanel = new Ext.Panel({
region: 'west',
title: 'Tools',
margins: '5 0 5 5',
split: true,
collapsible: true,
width: 310,
layout: 'accordion',
// Layout animation was introducing a bug in collapsible panel
/*layoutConfig: {
items: [summaryPanel, historyPanel, searchPanel, printPanel, tagsPanel, helpPanel]

Note : I needed to disable the animation because if you pragmatically open multiple panels in a row... it keeps some of them opened forever :D lol!

Here is my 3 issues thread... Plz help with collapsing! :( I can't animate my app, sniff

19 Feb 2010, 12:06 PM
First, when I pragmatically want to display panels one by one, it set a fixed size. So, when it does not display, it look like a no size panel.
Second, when I don't force them to be displayed one by one, the accordion will open a little and show me the border of the panel contained inside :) So this mean, the panel is there and don't know what to do with inside things.
Third, The fieldset do the same, it open a bit, but nothing is inside... (there is no border visible to confirm this by the way).


19 Feb 2010, 12:11 PM
Because I'm always asked to put my code, here is some...

Note that I have more then 1 combobox in there. but I wanted to make this as short as possible.
Fieldset : if I collapse it, I wont be able to see what's inside.

var searchLocationOptions = new Ext.form.FieldSet({
id: 'searchLocationOptions',
defaultType: 'combobox',
labelWidth: 130,
checkboxToggle: true,
animCollapse: true,
title: 'Search in Fields',
items: [
new Ext.form.ComboBox({
id: 'documentTitleField',
store: new Ext.data.SimpleStore({
fields: ['dataint'],
data: ['0'],
expandData: true
displayField: 'dataint',
mode: 'local',
triggerAction: 'all',
emptyText: 'Search...',
selectOnFocus: true,
fieldLabel: 'Documents Title',
anchor: '100%'

An example of panel inside the accordion.

var helpPanel = new Ext.Panel({
id: 'helpPanel',
title: 'Help',
layout: 'fit',
autoScroll: true,
autoLoad: {
url: '../../views/home/help.html',
scope: this