PDA

View Full Version : Creating Accorion programmtically



piccard
8 Apr 2010, 3:07 AM
Hello,

I've got a small problem in creating an accordion inside a panel programmatically.
I've got a normal viewport, where in the east I created an accordion-layout the classical way:


...
},{
region: 'east',
id: 'east',
xtype: 'panel',
border: true,
split: true,
collapsed: false,
collapsible: true,
collapseMode: 'mini',
width: 200,
height: '100%',
layout: 'accordion',
layoutConfig: {animate: true},
items: [{
title: 'aaa',
html: '01'
},{
title: 'bbb',
html: '02'
},{
title: 'ccc',
html: '03
}]
},{
...
Everything works fine:)

In the west I tried to create it programmatically, but it doesn't work as expected.


...
},{
region: 'west',
id: 'west',
xtype: 'panel',
split: true,
border: true,
collapsible: true,
collapseMode: 'mini',
title: 'Navigation',
width: 200,
height: '100%',
},{
...
And here's my code for creating the accordion:



var west= Ext.getCmp('west');
west.add({
id: 'categoriesAccordion',
layout: 'accordion',
border: false,
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px',
fill: true,
border: false,
autoHeight:true,
autoScroll:true,
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
collapseFirst: false,
animate: true,
frame: false,
},
items: [{
title: 'Introduction',
html: 'test01',

},{
title: 'Basic Content',
html: 'test02'
}]

});
west.doLayout();
Indeed, there's gonna be an accordion created inside the panel, but it doesn't work as expected (like the east-side). The height of the accordion is just set to the max height of the text, but I would need the whole panel-height, like the east-side.

Also, it's not important, but I would like to know it, which option do I have to activate, so that by clicking on the accordion-header, the accordion is gonna be expanded or closed?

Thanx a lot :)

jay@moduscreate.com
8 Apr 2010, 9:08 AM
give the west region a 'fit' layout

jay@moduscreate.com
8 Apr 2010, 9:09 AM
Actually, your west region should have the accordion layout, and you should add the children programaticallly.