Hi,
I'm having performance issues with the treepanel and I'm not loading huge amount of data. The treestore loads about 200 nodes (calls are < 100 ms), which are all child of the root node. It take a good 4-5 seconds to render the nodes in the tree. I was wondering if anybody came across a similar problem using the treepanel.
Here is what im doing
Model:
Code:
Ext.define('Dash.model.air.Airport', {
extend : 'Ext.data.Model',
idProperty : 'id',
fields : [{
name : 'id',
type : 'int'
}, {
name : 'text',
type : 'string'
}, {
name : 'iconCls',
type : 'string',
defaultValue : 'other-mn-bullet'
}, {
name : 'loaded',
type : 'boolean',
defaultValue : true
}, {
name : 'expanded',
type : 'boolean',
defaultValue : true,
persist : false
}]
});
Store
Code:
Ext.define('Dash.store.air.Airports', {
extend : 'Ext.data.TreeStore',
storeId : 'Airports',
model : 'Dash.model.air.Airport',
autoLoad : false,
root : {
text : 'root',
id : 'src',
expanded : true
},
proxy : {
type : 'direct',
directFn : AirportWS.GetAirports,
reader : {
type : 'json'
}
}
});
View
Code:
Ext.define('Dash.view.air.AirportTree', {
extend : 'Ext.tree.Panel',
alias : 'widget.airportTree',
width : 150,
border : false,
rootVisible : false,
animate : false,
useArrows : true,
singleExpand: false,
store : 'air.Airports'
});
To load:
Code:
this.getTree().getEl().mask('Loading..');
//load the tree
this.getTree().getStore().load({
scope : this.getTree(),
callback : function(result) {
//remove the loading mask
this.getEl().unmask();
//update the airport count title
this.setTitle('Airports (' + result.length + ')');
}
});
Here is a screenshot of speedtracer
I've used treepanel in the past (Ext 3) and I never had any problems. Note that I'm using the sandbox build for Extjs 4 (4.1.1), but all other components are working good. Any help would be great.