
Originally Posted by
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:
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)
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.