Layout Collapse/Expand using Firefox is choppy

[MarkT]

I have a complicated Layout with grid panels and other goodies. I have the region's animation turned off. When I would collapse or expand the West region, with a complicated Center region, it would be very choppy. First the center region's body would resize, then its paging tool bar, followed by the tabs, etc.. It was better with IE.

I noticed that resizing the West region with the split bar didn't result in the same choppy resize/layout.

I was able to fix it by wrapping the collapse and expand functions with the following:

this.mgr.getRegion('center').activePanel.beforeSlide();
...
this.mgr.getRegion('center').activePanel.afterSlide();

[mystix]

are you on linux by any chance?

[tobiu]

hi MarkT,

i also find this topic quite interesting.
i think jack wrote somewhere(...) in the forum, that we shall deaktivate expand / collapse animations when working with borderlayouts and gridpanels.

especially the west-region causes some ugly effects when expanding.

in ext2.0 this will be much better looking:
http://extjs.com/playpen/ext-2.0-dev/examples/feed-viewer/view.html

is a good example for a grid and a west-region there.


since i am working still with ext1.1, i would like you to explain a bit more, what you have done.

i searched the api-docs a bit, "activePanel" is not mentioned there as a public property, so i guess you defined it by yourself, like



activePanel = this.mgr.getRegion('center').getActivePanel();


i found



beforeSlide : function(){
this.el.clip();
this.resizeEl.clip();
},

afterSlide : function(){
this.el.unclip();
this.resizeEl.unclip();
},


in the ContentPanels.js (not in the docs too), and tried it out by myself.

when having a west region with accordion-menu, center-gridpanel and east-region,
the collapse animation looks a lot better:

without this, the grid jumped over the west-panel for a moment and the the slide began, now it seems correct.

but this still does not help on expanding: in my case, when expanding the west-region, the grid jumps over the east-panel for a moment. i have no idea, if that is fixable with 1.1 (maybe build in some delaying components?).


but of course, this is a good start!

kind regards, tobiu

[MarkT]

Nope. Windows XP. This is a known issue with Firefox, that's why the beforeSlide and afterSlide functions were created in the first place (from what I understand). I didn't notice this until I was demoing a page on a friend's older PC.

After I posted this, I noticed the scroll state was being lost by the changes I made. I ended up making a few additions. Here's my collapse function from my extension of Ext.LayoutRegion:

collapse : function(skipAnim){
if (this.collapsed) return;
this.collapsed = true;
if (this.split){
this.split.el.hide();
}
if (this.config.animate && skipAnim !== true){
var sstate = false;
var ap = this.mgr.getRegion('center').activePanel;
// If there's a Grid Panel, remember and restore the scroll state.
if (Ext.isGecko && ap.grid)
sstate = ap.grid.view.getScrollState();
// If there's a nested layout, clip it's center panel, too.
if (Ext.isGecko && ap.layout && ap.layout.getRegion('center').activePanel.beforeSlide)
ap.layout.getRegion('center').activePanel.beforeSlide();
// Clip the Center region
if (ap.beforeSlide)
ap.beforeSlide();
this.fireEvent("invalidated", this);
// Unclip the Center region
if (ap.afterSlide)
ap.afterSlide();
// Unclip the nested panel's center region.
if (Ext.isGecko && ap.layout && ap.layout.getRegion('center').activePanel.afterSlide)
ap.layout.getRegion('center').activePanel.afterSlide();
// Restore the Grid Panel's scroll state.
if (sstate) {
ap.grid.view.restoreScroll(sstate);
}
// Wait a bit for the browser to render, then start the animation.
this.animateCollapse.defer(Ext.isIE ? 125 : 66, this);
}else{
this.el.setLocation(-20000,-20000);
this.el.hide();
this.collapsedEl.show();
var sstate = false;
var ap = this.mgr.getRegion('center').activePanel;
// If there's a Grid Panel, remember and restore the scroll state.
if (Ext.isGecko && ap.grid)
sstate = ap.grid.view.getScrollState();
if (ap.beforeSlide)
ap.beforeSlide();
this.fireEvent("invalidated", this);
if (ap.afterSlide)
ap.afterSlide();
// Restore the Grid Panel's scroll state.
if (sstate) {
ap.grid.view.restoreScroll(sstate);
this.fireEvent("collapsed", this);
}
}
},
And the animateCollapse from my extension of Ext.SplitLayoutRegion:

animateCollapse : function(){
this.beforeSlide();
// Prevent layout() during animation.
this.mgr.beginUpdate();
this.el.setStyle("z-index", 20000);
var anchor = this.getSlideAnchor();
this.el.slideOut(anchor, {
callback : function(){
this.el.setStyle("z-index", "");
this.mgr.endUpdate();
this.collapsedEl.slideIn(anchor, {duration:.25});
this.afterSlide();
this.el.setLocation(-10000,-10000);
this.el.hide();
this.fireEvent("collapsed", this);
},
scope: this,
block: true
});
},
Firefox now handles the collapse of the West region a lot better.

I also added code to block calls to the layout's layout function. I noticed IE firing layout a couple times during the collapse/expand process. I'm not sure of the exact source, but it really hurt the performance of the animation.

[MarkT]

BTW - dnixon also posted about this issue in the Premium Help forum.
Animation Smoothness (http://extjs.com/forum/showthread.php?t=11704)

[MarkT]

I didn't have an East panel, so hadn't noticed. Here's my versions of the expand functions.

expand : function(e, skipAnim){
if(e) e.stopPropagation();
if(!this.collapsed || this.el.hasActiveFx()) return;
if(this.isSlid){
this.afterSlideIn();
skipAnim = true;
}
this.collapsed = false;
if(this.config.animate && skipAnim !== true){
this.animateExpand();
}else{
this.el.show();
if(this.split){
this.split.el.show();
}
this.collapsedEl.setLocation(-2000,-2000);
this.collapsedEl.hide();
var sstate = false;
var ap = this.mgr.getRegion('center').activePanel;
if (Ext.isGecko && ap.grid)
sstate = ap.grid.view.getScrollState();
if (ap.beforeSlide)
ap.beforeSlide();
this.fireEvent("invalidated", this);
this.fireEvent("expanded", this);
if (ap.afterSlide)
ap.afterSlide();
if (sstate) {
ap.grid.view.restoreScroll(sstate);
}
}
},

animateExpand : function(){
this.beforeSlide();
// Prevent layout() during animation.
this.mgr.beginUpdate();
var anchor = this.getSlideAnchor();
this.collapsedEl.slideOut(anchor, {
duration:.25,
callback: function(){
this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
this.el.setStyle("z-index", 20000);
this.el.slideIn(this.getSlideAnchor(), {
callback : function(){
this.el.setStyle("z-index", "");
this.afterSlide();
this.mgr.endUpdate(true);
if(this.split){
this.split.el.show();
}
var sstate = false;
var ap = this.mgr.getRegion('center').activePanel;
if (Ext.isGecko && ap.grid)
sstate = ap.grid.view.getScrollState();
if (ap.beforeSlide)
ap.beforeSlide();
this.fireEvent("invalidated", this);
if (ap.afterSlide)
ap.afterSlide();
if (sstate) {
ap.grid.view.restoreScroll(sstate);
}
this.fireEvent("expanded", this);
},
scope: this,
block: true
});
},
scope: this
});
},