Ext.ux.FlexAccord - resizable accordion panels with drag/drop
With Ext 3.0 final coming up, conjoon 0.1RC1 is raring to go. Along with new features there was also an improvement regarding the "quick panels" - panels that contain widgets to access often needed functionality.
Using the usual AccordionLayout, I faced the problem that I wanted to keep more than one panel expanded at a time - and even drag/drop panels to re-order their positions. This is why I worked on Ext.ux.FlexAccord, which gives the following features:
LayoutManager for holding collapsible panels with either fixed or flexible heights
Functionality for expanding more than one panel at a time
SplitBars for resizing panels vertically
Drag/Drop for re-ordering panels or changing panel-positions within containers that use the same LayoutManager
The following screenshot shows Ext.ux.FlexAccord in conjoon - the left/right panel both use Ext.ux.FlexAccord as the LayoutManager:
Nice - is this Ext 3 only, or does it work with 2.2.1, too?
I have started to work on this extension with Ext 2.2.1, but moved to 3.0 once it was available. There's nothing fancy going on so it _might_ still work with 2.*, but no guarantee on that. The example uses Ext3.0RC2 btw.
Thanks for the feedback so far. I have just commited a new version which solves a few sizing issues, mainly when it comes to panels within a FlexAccord-Container that are using toolbars. See the changeset for details.
Here, one panel gets bigger while the other shrinks in unison. A lot smoother than the Ext way.
Well, this is rather complicated since this is something the layout manager in the Ext library handles - one had to inspect the css for those panels to see how they handle sizings, which might differ from the way Ext JS does it. The only way I could think of right now would be to attach two simultaneously animation effects (one for collapsing, one for expanding), which might look jerky as well.