View Full Version : Customizing Accordion

22 Feb 2010, 7:12 AM

I need to customize the accordion such that when the accordion header is clicked the accordion panel item shouldn't collapse but the items in the accordion panel should be reloaded with the default values.

I noticed that the below code in the Ext.Panel is what causes the accordion panel to collapse.

if(this.titleCollapse && this.header){
this.mon(this.header, 'click', this.toggleCollapse, this);
this.header.setStyle('cursor', 'pointer');

I tried to achieve the expected functionality by extending the Panel class to override the OnRender method and change the above lines of code to call my own custom handler.The extened Panel is then added as the items in accordion.(In theory i like the logic but as usual nothing works when you try to implement it :(()

Is there any other way of doing this. I have been struggling with the Extjs Inheritence concept for the past two days wit no luck(i have read the tutorials but it didn't help either .. in desperation i even copy pasted the entire Panel class and just changed the above lines to create my own panel..no joy ). Would it be possible to guide me how i can get the expected functionality.( i have been searching through forums for the last couple of days and am really desperate to know how it can be done)

Please help.

Thanks and Regards

22 Feb 2010, 9:07 AM
setup an 'expand' event on the child items that will load the data.

22 Feb 2010, 10:03 AM
Hi ,
Thanks for the reply.

In my accordion panel,my first item is a button and then a panel containing links.When the button is clicked the panel contents are changed. I need to capture the click event on the first item header/title such that the inner panel contents are changed back to original.

How will expand function on the child items help? Wouldn't the accordion panel collapse still if the header is clicked? or am i missing the point here?