PDA

View Full Version : [OPEN] (5.0.1.1255) TreePanel Animation Broken with Fixed Height



mhill
1 Oct 2014, 8:06 AM
STAND-ALONE TEST CASE
Fiddle: https://fiddle.sencha.com/#fiddle/bah

ADDITIONAL INFO
Ext version tested:

(Broken) Ext 5.0.1 rev 1255
(Works) Ext 5.0.0 rev 970
Browser versions tested against:

Chrome 37
DOCTYPE tested against:

HTML
Description:

The TreePanel expand/collapse animation does not take effect when the TreePanel has a fixed height. This includes cases in which the TreePanel has a fixed height set by its container, such as when it is within a border layout container.
Steps to reproduce the problem:

Create a TreePanel
Attach some data to this TreePanel
Set "animate" to true, or leave "Ext.enableFx" as true
Set "height" on the TreePanel to an explicit value
Expand and collapse nodes within the TreePanel
The result that was expected:

The expand/collapse animation should run
The result that occurs instead:

No expand/collapse animation runs

Something changed from 5.0.0.970 to 5.0.1.1255 that broke this.

This is critical for our current project. We boasted about how nice Ext JS 5 is to get approval for the project, so we do need these features to look at least as good as the version we're upgrading from (Ext JS 3).

Gary Schlosberg
1 Oct 2014, 11:33 AM
Thanks for the report! I have opened a bug in our bug tracker.

mhill
3 Oct 2014, 12:13 PM
CAUSE
The issue is in the way that the Ext.grid.plugin.BufferedRenderer is attached to the Tree Panel. In version 5.0.0.970, the BufferedRenderer does not seem to be automatically attached, even if the bufferedRenderer property is set to true.

However, in version 5.0.1.1255, the Ext.panel.Table#beforeRender handler override was added, and this handler forces a BufferedRenderer to be attached to the Tree Panel no matter what (quite the opposite of 5.0.0.970). The only exception that I've found to this for Tree Panels is when the Tree Panel uses an auto height, since such containers cannot use a BufferedRenderer (no idea why, just repeating what the error says!).

When the BufferedRenderer plugin is added to the grid, the Ext.grid.plugin.BufferedRenderer#init method is called, and this method automatically sets the animate property of the grid to false.

Version 5.0.0.970 does not have the Ext.panel.Table#beforeRender handler override so it does not run into this issue.

On a related note, it's also worth noting that there does not appear to be any way to attach a BufferedRenderer in version 5.0.0.970, and there does not appear to be any working way to not attach a BufferedRenderer in version 5.0.1.1255.


WORKAROUND
Explicitly assign a BufferedRenderer for the Tree Panel. This causes the Ext.panel.Table#beforeRender method to skip its attempt to attach an additional BufferedRenderer to the view.


Fiddle: https://fiddle.sencha.com/#fiddle/baj
Example:

Ext.create("Ext.tree.Panel", {
bufferedRenderer: Ext.create("plugins.bufferedrenderer"),
store: {
root: {
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "algebra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
}
});



I'm not sure yet if there are any negative side-effects to this workaround.

mattgolding
18 May 2015, 7:44 PM
Is there a ETA for a fix on this. I applied the work around and it fixed the issue but as the OP said he is not sure on any side effects and neither am I. This bug has been around a for a while do we know when it will be fixed? I tested this against the ExtJS 6 and it is still broken.

mhill
18 May 2015, 8:12 PM
A bit unfortunate to hear that this bug is still there in ExtJS 6, but we've been using the workaround in our project for a while and thankfully haven't run into any issues.

It probably wouldn't be very hard to create a patch for this if needed though based on the description given in post #3.

anupkshah
26 Jun 2015, 5:57 AM
Many thanks for this workaround. The workaround can be incorporated into an override, though it might be risky to make it too global, but if you need to here is an example:


Ext.define('overrides.tree.Panel', {
override: 'Ext.tree.Panel',

// workaround for node expand/collapse not animating
// courtesy: https://www.sencha.com/forum/showthread.php?292713-%285.0.1.1255%29-TreePanel-Animation-Broken-with-Fixed-Height
bufferedRenderer: Ext.create("plugin.bufferedrenderer")
}