[FIXED-1107] Treegrid Sorting Issue with Multiple Treegrids

[Reimius]

Hello all,

I've searched the forum for this and could not find it already having been reported. This is really surprising to me since I noticed it right away when I started to develop a page.

Ext version tested:


Ext 3.2 rev 1



Adapter used:


?



css used:


only default ext-all.css





Browser versions tested against:


IE6
FF3.6
Safari 4



Operating System:


WinXP Pro



Description:


When a page contains more than one treegrid, the sorting does not work correctly on all but the last grid.
When changing the last grid's sorting, it seems to affect all other grids (not directly) if the column has the same data index.



Test Case:



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

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230,
sortable: false
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],

dataUrl: 'treegrid-data.json'
});
var tree2 = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230,
sortable: false
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],

dataUrl: 'treegrid-data.json'
});
});

See this URL : none


Steps to reproduce the problem:


Add more than one treegrid to a page (just use the extjs example treegrid)
Try to sort any treegrid that was not the last one added (this shouldn't work)
Also, if you sort the last grid added and sort any non-last grids they may sort based on the last grid's sorting state



The result that was expected:


Correct sorting of all treegrids



The result that occurs instead:


Sort did not happen, or was sorted based on last added grid's current sort state



Screenshot or Video:


attached



Debugging already done:


none



Possible fix:


not provided

[Reimius]

After searching through the code and testing some things, I found the fix. It's super simple:

Replace line 57 of TreeGridSorter.js with:
var me = this;

It was:
me = this;
which of course made the variable global to the namespace and therefore all treegrids were refering to the nodes in the treegrid that was last created on the page.

[j.bruni]

Replace line 57 of TreeGridSorter.js with:
var me = this;


Indeed! Thanks.

[evant]

Nice catch! Fixed in SVN, thanks.