Override expand/collapse animation in panel/grid with EXTJS

2
votes

Normally, the expand/collapse functionality in extjs works as the panel/grid header stays in a position and the body of the panel/grid moves down/up. But I need the panel header to be in a position and on expand, the header has to move up showing the panel/grid body. On collapse, the header has to move down and come to the original position. This is just like expand and collapse in accordian layout inner panel. But I want it with a single panel. Any code samples or pointer would be very helpful.

Note: Please note that I cannot use any third party plugin..

1
extjsextjs4.2
which version of extjs are you using? - Pavle Gartner
Extjs version is 4.2.1 and please note that the functionality has to work in browsers >= IE7 - CARTIC
Why don't you use an accordion layout with only one panel? - hermann

1 Answers

2
votes

This sample in ExtJs 4.2.1.

One way to do what you are trying to achieve is by injecting "expander" div in afterrender event of parent panel before collapsible children. This means items are at the bottom of parent body after expander div so there is space to expand them up. When children are collapsed/expanded or parent is resized, injected div gets height of parent minus children.

You can see it here: https://fiddle.sencha.com/#fiddle/44c

Edit: I don't really get 1 panel part - if you want single panel to behave like that, expander could be injected into wrapper before header and content, but than you are left with panel of same size but collapsed - the only scenario this makes sense to me is by reversing collapse of children in sample I provided