PDA

View Full Version : [CLOSED] TreePanel flickers after reloading of TreeStore by timeout



Zavit
9 Dec 2012, 2:26 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0
Browser versions tested against:

FF 16.0.2
IE8
Opera 12.02
Description:

TreePanel flickers when i dinamically reload TreeStore(timeout - 1sec).
Steps to reproduce the problem:

See ext js code and json data below;
Open the application in any browser, click on checkbox(refresh);
See result.
The result that was expected:

TreePanel should not flickers after reloading
The result that occurs instead:

TreePanel flickers
Test Case:


Ext.application({
name : 'WebConsole',
launch : function() {


var treeStore = Ext.create('Ext.data.TreeStore', {
autoLoad:true,
proxy : {
type : 'ajax',
url : 'server.json',
reader : {
type : 'json'
}
}
});
var runReloadTreePanel = Ext.create("Ext.util.TaskRunner");
var taskTree = {
run : function() {
treeStore.load();
},
interval : 1000
}


var checkbox = Ext.create('Ext.form.field.Checkbox', {
boxLabel : 'Refresh',
listeners : {
change : {
fn : function(field, newValue, oldValue) {
if (newValue) {
runReloadTreePanel.start(taskTree);
} else {
runReloadTreePanel.stop(taskTree);
}
}
}
}
});
var treepanel = Ext.create('Ext.tree.Panel', {
store : treeStore,
rootVisible : false,
dockedItems : [ {
xtype : 'toolbar',
dock : 'bottom',
items : [ checkbox ]
} ]
});


Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [ treepanel ]
});


}
});



HELPFUL INFORMATION

server.json content:


{text: 'Services', expanded:'true', children:[ {text : 'JMS',leaf : false, expanded: true, children:[
{text : 'ActiveMQClient',leaf : true,icon: 'data/images/STOPPED_icon.gif'},
{text : 'ActiveMQServer',leaf : true,icon: 'data/images/STARTED_icon.gif'}]},
{text : 'Routes',leaf : false, expanded: true, children:[
{text : 'Backend Emulation',leaf : false, expanded: true, children:[
{text : 'Backend Emulation[1]',leaf : true,icon: 'data/images/STARTED_icon.gif'},
{text : 'Backend Emulation[2]',leaf : true,icon: 'data/images/STARTED_icon.gif'}]},
{text : 'XEConnect',leaf : false, expanded: true, children:[
{text : 'XEConnect Inbound',leaf : false, expanded: true, children:[
{text : 'XEConnect Inbound[1]',leaf : true,icon: 'data/images/STARTED_icon.gif'},
{text : 'XEConnect Inbound[2]',leaf : true,icon: 'data/images/STARTED_icon.gif'}]},
{text : 'XEConnect Outbound',leaf : false, expanded: true, children:[
{text : 'XEConnect Outbound[1]',leaf : true,icon: 'data/images/STARTED_icon.gif'},
{text : 'XEConnect Outbound[2]',leaf : true,icon: 'data/images/STARTED_icon.gif'}]}]}]},
{text : 'XEConnect',leaf : false, expanded: true, children:[
{text : 'CORE Server',leaf : true,icon: 'data/images/STARTED_icon.gif'}]}]}

Operating System:

Windows 7 Pro
I researched that the displaying of the tree can take about 400 milliseconds of time

mitchellsimoens
9 Dec 2012, 7:58 AM
I don't see a flicker, only the rendering of the nodes loaded by the TreeStore into the TreePanel as expected.

evant
9 Dec 2012, 3:12 PM
There is a small flicker while it redraws the tree, you will see the same thing, but not as pronounced, when redrawing the grid.

In fact you'll see it pretty much anywhere when you're updating any complex kind of content while the browser redraws.