Ext.ux.FlexAccord - resizable accordion panels with drag/drop

[ThorstenSuckow]

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:



The project home can be found at http://code.google.com/p/ext-ux-flexaccord/.

An example implementation can be viewed at http://www.siteartwork.de/flexaccord.../twopanel.html

P.S.:
The code is currently in Beta state and needs some cleanup.

[temporary]

Nice - is this Ext 3 only, or does it work with 2.2.1, too?

[ThorstenSuckow]

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.

[jay@moduscreate.com]

Stellar!! That's awesome Thorsten!

[Scorpie]

Very nice!

[ThorstenSuckow]

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.

[ThorstenSuckow]

I have just tagged V0.1 of Ext.ux.FlexAccord - for a complete list of changes see http://code.google.com/p/ext-ux-flexaccord/source/list

There have been made a number of optimizations regarding drag/drop functionality and calculation of sizings.

[bt_bruno]

Very impressive dude! Thanks for sharing.

[stever]

Very nice indeed!

One request that I wish was fixed in the Ext accordion: When expanding/collapsing a panel, it animates, then the other panel jerks to take up the space. Try this example:

http://jqueryui.com/demos/accordion/mouseover.html

Here, one panel gets bigger while the other shrinks in unison. A lot smoother than the Ext way.

[ThorstenSuckow]

Just commited 0.1.1 to the repository - this is a maintanance released which solves a few issues - see http://code.google.com/p/ext-ux-flex...rce/detail?r=9 for all teh changes that made it into this release.

Very nice indeed!

One request that I wish was fixed in the Ext accordion: When expanding/collapsing a panel, it animates, then the other panel jerks to take up the space. Try this example:

http://jqueryui.com/demos/accordion/mouseover.html

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.