PDA

View Full Version : Speed up Grid rendering...how can I do?



alebar
17 May 2010, 4:56 AM
Hi all,
I'm pretty new to ExtJS, but I would like to know if I'm doing something wrong with grid implementation.
The problem is that I've to manage grids with a number of columns grater than the number of rows (such as 200 col, 4 rows), and it seems to affect rendering performances (maybe).
Specifically, I implemented the cell shifitng function below


var doForwardCellShift = function(thisGrid){

var coordinates = thisGrid.getSelectionModel().getSelections(); //getSelections returns an array with selected indices...
var elements1 = [];
var fieldNames1 = [];
/* I want to create an array with every selected aa */
for (var i=0; i<coordinates.length; i++) {
var record = thisGrid.getStore().getAt(coordinates[i][0]);
var fieldName1 = thisGrid.getColumnModel().getDataIndex(coordinates[i][1]);
var data1 = record.get(fieldName1);
if (data1 == '-'){
return;
}
elements1.push(data1);
fieldNames1.push(fieldName1);
}
//Handle multiple aminoacids shifting
if (coordinates.length>1){
//Sorting coordinates array by [0] value of each list element
//coordinates=coordinates.sort();
//Determing which kind of shifting I have (multiple rows or same row)
if (coordinates[0][0]==coordinates[coordinates.length-1][0]){ //Same row cell shifting
//Checking either if cells are not in the first column or are going to be moved after the last one
if (coordinates[0][1]==0 || (coordinates[coordinates.length-1][1]+1)>=upto){
return;
}

//Check if I can perform that shifting
var record = thisGrid.getStore().getAt(coordinates[0][0]);
var fieldName2 = thisGrid.getColumnModel().getDataIndex(coordinates[coordinates.length-1][1]+1);
var data2 = record.get(fieldName2);
if (data2 != '-') {
//window.alert('Shifting not allowed');
return;
}
//Iteration
for (var j=coordinates.length-1; j>=0; j--) {
var record = thisGrid.getStore().getAt(coordinates[j][0]);
var fieldName2 = thisGrid.getColumnModel().getDataIndex(coordinates[j][1]+1);
var data2 = record.get(fieldName2);
record.set(fieldNames1[j], data2);
record.set(fieldName2, elements1[j]);
record.commit();
}
} else {
//Single column case
if (coordinates[0][1]==coordinates[coordinates.length-1][1]){
//window.alert('Single column shifting');
if (coordinates[0][1]==0 || (coordinates[coordinates.length-1][1]+1)>=upto){
return;
}
/* The only way to check the content is iterating two times the record!*/
//First iteration
for (var j=0; j<coordinates.length; j++) {
var record = thisGrid.getStore().getAt(coordinates[j][0]);
var fieldName2 = thisGrid.getColumnModel().getDataIndex(coordinates[j][1]+1);
var data2 = record.get(fieldName2);
if (data2 != '-') {
//window.alert('Shifting not allowed');
return;
}
}
//Second time....
for (var j=0; j<coordinates.length; j++) {
var record = thisGrid.getStore().getAt(coordinates[j][0]);
var fieldName2 = thisGrid.getColumnModel().getDataIndex(coordinates[j][1]+1);
var data2 = record.get(fieldName2);
record.set(fieldNames1[j], data2);
record.set(fieldName2, elements1[j]);
record.commit();
}
} else {
//Multiple Column case
//window.alert("Multiple columns case");
if (coordinates[0][1]==0 || (coordinates[coordinates.length-1][1]+1)>=upto){
return;
}

var hmc = (coordinates[coordinates.length-1][1]-coordinates[0][1])+1; //how many columns I have to deal with

for (var j=0; j<coordinates.length; j+=hmc) {
var record = thisGrid.getStore().getAt(coordinates[j][0]); //first iteration last column
var fieldName2 = thisGrid.getColumnModel().getDataIndex(coordinates[(j+hmc)-1][1]+1);
var data2 = record.get(fieldName2)
//window.alert(data2);
if (data2 != '-') {
//window.alert('Shifting not allowed');
return;
}
}
for (var j=coordinates.length-1; j>=0; j--) {
var record = thisGrid.getStore().getAt(coordinates[j][0]);
var fieldName2 = thisGrid.getColumnModel().getDataIndex(coordinates[j][1]+1);
var data2 = record.get(fieldName2);
record.set(fieldNames1[j], data2);
record.set(fieldName2, elements1[j]);
record.commit();
}

}
}
}What I'd like to know is why the greater is the number of columns I want to shift, the slower this "action" is?
If I select 10 columns and 4 rows, in order to shift them, it takes ages to perform the operation.....
Moreover the operation is associated to a key map handler in this way:

....
new Ext.KeyMap("myWin", [
{
key: "m",
stopEvent: true,
fn: function(k,e){
var myGrid = Ext.getCmp('aligngrid');
doForwardCellShift(myGrid);
e.stopEvent();
}
} ....

I believed it could be a matter of arrays iteration, but using the firebug profiler I get that the slowest functions are insertHtml() (from ext-all-debug.js) and apply() (from ext-base.js).
Are there some workaround I can use in order to avoid this issue?
Am I doing something wrong?

Thanks in advance

Condor
17 May 2010, 5:26 AM
1. If you are changing multiple fields in a record then you should use:

record.beginEdit();
record.set('field1', value1);
record.set('field2', value2);
...
record.endEdit();
2. If you are changing almost all records in a store then it is faster to use:

store.suspendEvents();
// update records
store.resumeEvents();
grid.getView().refresh();

alebar
17 May 2010, 5:47 AM
2. If you are changing almost all records in a store then it is faster to use:
Code:
store.suspendEvents();
// update records
store.resumeEvents();
grid.getView().refresh();


Thanks Condor, it solved al my issues!