PDA

View Full Version : Creating Accorion programmtically



piccard
8 Apr 2010, 3:15 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 :)

piccard
8 Apr 2010, 7:34 AM
ok, didn't get it in a 'poor' programmatically way, but this also works:



extend the accordion:



Ext.ns('Application');
Application.PersonnelAccordionpanel = Ext.extend(Ext.Panel, {
border: true
,initComponent:function() {
Ext.apply(this, {
split: true,
//bodyStyle:'padding:5px;font-family:Arial;font-size:10pt;',
width: 200,
height: '100%',
layout: 'accordion',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px',
fill: true,
autoScroll:true,
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: true,
collapseFirst: false,
animate: true,
frame: false,
}
});
Application.PersonnelAccordionpanel.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {
Application.PersonnelAccordionpanel.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

Ext.reg('personnelAccordionpanel', Application.PersonnelAccordionpanel);


use the new custom component:



},{
region: 'west',
id: 'west',
xtype: 'personnelAccordionpanel',
collapsed: false,
collapsible: true,
collapseMode: 'mini',
frame: false,
},{


and add the items:




var west= Ext.getCmp('west');
west.add({
id: 'test1',
title: 'test1',
html: '<h4>yeah</h4>'
},{
id: 'test2',
title: 'test2',
html: '<h4>yeah</h4>'
});
west.doLayout();