1. #1
    Ext User alebar's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    0
    alebar is on a distinguished road

      0  

    Default Speed up Grid rendering...how can I do?

    Speed up Grid rendering...how can I do?


    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

    PHP Code:
    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=0i<coordinates.lengthi++) {
                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]==|| (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-1j>=0j--) {
                        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(fieldName2elements1[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]==|| (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=0j<coordinates.lengthj++) {
                                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=0j<coordinates.lengthj++) {
                                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(fieldName2elements1[j]);
                                
    record.commit();
                            }
                        } else {
                            
    //Multiple Column case
                            //window.alert("Multiple columns case");
                            
    if (coordinates[0][1]==|| (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=0j<coordinates.lengthj+=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-1j>=0j--) {
                                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(fieldName2elements1[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:
    PHP Code:
    ....
             new 
    Ext.KeyMap("myWin", [
            {
                
    key"m"
                
    stopEventtrue,
                
    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

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. If you are changing multiple fields in a record then you should use:
    Code:
    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:
    Code:
    store.suspendEvents();
    // update records
    store.resumeEvents();
    grid.getView().refresh();

  3. #3
    Ext User alebar's Avatar
    Join Date
    Apr 2010
    Posts
    21
    Vote Rating
    0
    alebar is on a distinguished road

      0  

    Default


    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!

Thread Participants: 1

Tags for this Thread