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 (http://www.conjoon.org) - the left/right panel both use Ext.ux.FlexAccord as the LayoutManager:

http://www.siteartwork.de/images/conjoon0.1RC1_small.jpg

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/examples/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 (http://code.google.com/p/ext-ux-flexaccord/source/detail?r=4) 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-flexaccord/source/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.

[mystix]

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:


i'm using this 2.x layoutConfig (in a container with layout:'accordion') from a long time back that somehow stops the jerking (i say somehow 'cos i've never really delved into the inner workings of the accordion layout's animation code)


// iirc, this config was courtesy of @jsakalos
layoutConfig: { // layout-specific configs go here
fill: false,
animate: true,

renderItem : function(c) {
if (this.animate === false) {
c.animCollapse = false;
}
c.collapsible = true;
if (this.autoWidth) {
c.autoWidth = true;
}
if (this.titleCollapse) {
c.titleCollapse = true;
}
if (this.hideCollapseTool) {
c.hideCollapseTool = true;
}
if (this.collapseFirst !== undefined) {
c.collapseFirst = this.collapseFirst;
}
if (!this.activeItem && !c.collapsed) {
this.activeItem = c;
} else if (this.activeItem) {
c.collapsed = true;
}
Ext.layout.Accordion.superclass.renderItem.apply(this, arguments);
c.header.addClass('x-accordion-hd');
c.on('beforeexpand', this.beforeExpand, this);
c.on('beforecollapse', this.beforeCollapse, this);
},

beforeCollapse: function(p) {
return this.activeItem !== p;
},

beforeExpand : function(p) {
var ai = this.activeItem;
this.activeItem = p;
if (ai) {
ai.collapse(this.animate);
}
if (this.activeOnTop) {
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
this.layout();
}
}

might want to try that.

note: the animation tends to "jerk" right at the end of the animation sequence if CPU usage is high at that point in time.
and i'm talking about chrome here.