Quote Originally Posted by stever View Post
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.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) {
        if (this.activeOnTop) {
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
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.