Operation System: Windows XP
Browser: IE8
Ext: 4.2.0 Beta2

Expanding/Collapsing tree panel containing more than 20 columns takes about 5 seconds.

Ext.Loader.setConfig({
enabled: true
}); Ext.Loader.setPath('Ext.ux', '../ux');


Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.ux.CheckColumn'
]);


Ext.onReady(function () {
Ext.QuickTips.init();


//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: (function () {
var fields = ['treecolumn'];
for (var i = 0; i < 25; i++) {
Ext.Array.push(fields, 'data' + i);
}
return fields;
})()
});


function createFakeData() {
var result = [];
for (var row = 0; row < 100; row++) {


var node = { treecolumn: row, children: [] }
for (var i = 0; i < 10; i++) {
var child = { leaf: true };
for (var j = 0; j < 25; j++) {
child['data' + j] = i;
}
Ext.Array.push(node.children, child);
}


Ext.Array.push(result, node);
}
return result;
}


var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'memory'
},
folderSort: true,
lazyFill: true,
root: {
expanded: true,
children: createFakeData()
}
});


//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
//width: 1500,
height: 300,
plugins: [{
ptype: 'bufferedrenderer'
}],
renderTo: Ext.getBody(),
collapsible: true,
rootVisible: false,
store: store,
multiSelect: true,
columns: (function () {
var columns = [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Tree Column',
flex: 2,
dataIndex: 'treecolumn'
}];
for (var i = 0; i < 25; i++) {
Ext.Array.push(columns, {
text: 'data' + i,
flex: 1,
sortable: true,
dataIndex: 'data' + 1
});
}


return columns;
})()
});
});