View Full Version : Tree expand/collapse (quick) "artefacts"

17 Jan 2012, 1:50 AM
I have problem with tree. I made an example than reproduce the problem.

launch : function()

Ext.create('Ext.container.Viewport', {
layout : {
type : 'fit'

items : [
{ xtype: 'container',
layout : {
type : 'vbox',
align : 'stretch'
items: [

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
store: Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: false, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
rootVisible: false,
listeners: {
itemexpand : function(node)

renderTo : Ext.getBody()

before expand
after expand

In my project i dont't use node.collapse(). I clicks (quickly) to expand/collapse button i see this problem.

17 Jan 2012, 8:56 AM
In what browser and what version of Ext JS 4? I'm not seeing this in Chrome using 4.0.7 and 4.1.0 beta 1

17 Jan 2012, 8:56 AM
Also, you don't need to use renderTo on an Ext.container.Viewport, it will automatically render itself.

17 Jan 2012, 11:31 AM
Also, you don't need to use renderTo on an Ext.container.Viewport, it will automatically render itself.

ExtJS: 4.0.7

Firefox 9.0.1 (OS Ubuntu 11.04)
Chrome 16.0.912.75 (OS Ubuntu 11.04)
Firefox 3.6 (OS Win XP SP3)
Chrome (OS Win XP SP3)
other configs not tested

17 Jan 2012, 10:04 PM
tried ExtJS 4.0.1 beta, same problem. For reproduce you need to click Expand button


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script type="text/javascript" src="app.js"></script>

19 Jan 2012, 6:59 PM

19 Jan 2012, 8:24 PM
This reminds me of another bug (present in both 4.0.7 and 4.1.0-beta-1).

Open the Web Desktop demo.
Launch the Accordion Window.
Click the expand/collapse button for the 'Friends' group very quickly. Hammer it as fast as you can. Do it in bursts and check the list after each burst.

I believe it goes crazy in all browsers but I find it easiest to reproduce in IE, presumably because IE is slightly slower than the other browsers and that makes it easier to click fast enough. Gradually the list gets longer and longer... then it throws an error.

Not sure that it's the same error you're seeing but it wouldn't surprise me, it feels similar.

19 Jan 2012, 10:49 PM
If i add

listeners: {itemexpand: function(node){node.collapse();}},
to classes.js (web desktop example), i get same problem.

Gradually the list gets longer and longer
no. One copy duplicates.

How to fix it?