ExtJS Accordion panel expand/collapse on mouseover event

Accordion layout is widely used ExtJS components because of its ability to display multiple panels in accordion one over another. An accordion layout is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

To expand/ collapse Panels user need to click on icon available on right side of the header. Let’s see how can we expand collapse panels on ‘mouseover’ event on Panel.

First create your own Panel by extending ExtJS’s panel and add following code on ‘afterrender’ event to support automatic expand/collapse on mouseover/mouseout event. I am using Ext.defer method to deplay expantion by 1 second.

Now create a container Panel with accordion layout and add above panel as a child items.


About the Author

+ has written 38 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google

Copyright © 2014 TechZoo - Technology Blog. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions