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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar