IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    614
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 614
    Points : 193
    Points
    193
    Par défaut [EXTJS 4.2.5] Infinite Grid, limiter à une seule requête à la fois
    Bonjour à tous,

    Je voudrais savoir comment je peux limiter le chargement automatique des pages de mon InfiniteGrid à une à la fois ?

    Actuellement mon store est configuré comme ci-dessous et il charge 3 pages directement. Et 25 résultats / page

    Petite précision, ma grille possède des lignes assez grandes en hauteur et du coup l'utilisateur ne voit que les 5 premières lignes.
    Ensuite vers la ligne 68/75, il charge la page 4 et juste la page 4

    Mais comment le configurer, si bien sûr c'est possible, pour qu'il ne charge qu'une seule page à la fois dès le départ ?

    D'avance merci !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    Ext.define('PX.store.InfPXs', {
        extend      : 'Ext.data.Store',
        model       : 'PX.model.InfPX',
        autoLoad    : false,
        storeId     : 'storeIdInfPX',
     
        remoteSort  : true,
        // allow the grid to interact with the paging scroller by buffering
        buffered    : true,
     
        leadingBufferZone   : 10, // The number of records to keep rendered below the visible area.
        trailingBufferZone  : 10, // The number of records to keep rendered above the visible area.
        numFromEdge         : 5,  // How close the edge of the table should come to the visible area before the table is refreshed further down.
     
        pageSize            : 25,
        purgePageCount      : 0,    
     
        proxy: {
            timeout : 240000,
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            type        : 'jsonp',
            limitParam  : 'rows',
            pageParam   : 'start',
     
            reader: {
                //type            : 'jsonp',
                totalProperty   : 'total', // si omit alors totalProperty prend aussi la valeur "total"
                totalMaxscore   : 'totalMaxScore',
                messageProperty : 'message',
                successProperty : 'success',
                root            : 'rows'
            },
            simpleSortMode      : true
        },
        sorters: [{
            property : 'pd',
            direction: 'DESC'
        }]
     });

  2. #2
    Membre actif
    Inscrit en
    août 2006
    Messages
    191
    Détails du profil
    Informations forums :
    Inscription : août 2006
    Messages : 191
    Points : 263
    Points
    263
    Par défaut
    Salut,

    Tu as essayé de configurer la taille de ta view ?


  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    614
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 614
    Points : 193
    Points
    193
    Par défaut
    Bonjour Showie,

    Hélas cela ne change rien,
    mais je pense que c'est bien ça car entre temps j'ai trouvé quelqu'un qui avait le même problème que moi.
    ExtJS Grid renders more rows than specified in pagesize

    hélas dans mon cas cela ne fonctionne pas, j'ai des problèmes de rafraîchissement de la grille.
    Arrivée vers la 10eme ligne, le grille clignote (refresh tout le temps je pense puis s'efface complètement)
    Peut être est-ce parce que j'utilise un CSS pour augmenter la taille Height de mes lignes.
    En effet je n'utilise pas la taille 21 en hauteur.

    J'ai aussi joué avec

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
            leadingBufferZone   : 1, // The number of records to keep rendered below the visible area.
            trailingBufferZone  : 1  // The number of records to keep rendered above the visible area.
    Avec 1, je passe de 3 requêtes à deux...

    Si tu as une idée je prends... car c'est la galère depuis quelques jours...

    Petite question, on ne sait jamais... la déclaration de viewSize tu la mets où ?
    j'ai essayé:
    - Dans le plugin 'bufferedrenderer',

  4. #4
    Membre actif
    Inscrit en
    août 2006
    Messages
    191
    Détails du profil
    Informations forums :
    Inscription : août 2006
    Messages : 191
    Points : 263
    Points
    263
    Par défaut
    Oui dans le BufferRendered.

    sinon c'est logique
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    leadingBufferZone   : 0, // Nombre d enregistrement au dessus de la zone visible.
    trailingBufferZone  : 0  // Nombre d enregistrement en dessous de la zone visible.
    il n'y a pas d enregistrement au dessus vu que c'est le début.
    donc il reste l enregistrement visible et 1 enregistrement en dessous soit 2.

    Essaye en mettant zéro et tu n 'en aura plus qu'un par contre le clignotement est lié justement à l absence de buffer.

    Juste pour savoir qu'est ce qui te gêne dans le fait de charger 3 pages au début ? c'est lent ?

  5. #5
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    614
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 614
    Points : 193
    Points
    193
    Par défaut
    Hélas en mettant 0 cela ne marche pas mieux,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
            leadingBufferZone   : 0, // The number of records to keep rendered below the visible area.
            trailingBufferZone  : 0  // The number of records to keep rendered above the visible area.
    Et
    viewSize n'a aucun effet.

    Avec le code fourni dans l'autre site internet (Stack Overflow), je n'arrive pas à trouver ce qui pourrait être bon comme valeur dans mon cas.

    Dans tous les cas que j'ai essayé,
    soit la grille fait n'importe quoi, soit fonctionne jusqu'à une certaine ligne, soit n'affiche rien tant que je touche pas le scrolldown mais même ensuite ça bug.


    Pour répondre à ta question:
    Je cherche effectivement à n'avoir qu'une page téléchargée car dans la page PHP appelée il y a un appel à un WebService externe qui prend parfois plusieurs secondes alors que mon traitement prend 500ms.
    Parfois je dépasse même les 25s !!! à cause de ce WebService. Et je ne suis pas propriétaire de ce WebService donc impossible de l'améliorer.

    Le top serait de pouvoir sortir l'appel à ce WebService de ma page PHP pour le faire dans le "onSuccess".
    Mais je ne sais pas où chopper les autres retours des pages 2, 3, 4, etc... Ceci fait l'objet d'une question mais personne ne sait ou ne répond hélas....
    C'est sûr que la bonne solution pour mon application c'est d'extraire le WebService, mais depuis 10j par une réponse.

    Si tu as une idée pour le WebService je prends bien sûr !

  6. #6
    Membre actif
    Inscrit en
    août 2006
    Messages
    191
    Détails du profil
    Informations forums :
    Inscription : août 2006
    Messages : 191
    Points : 263
    Points
    263
    Par défaut
    Est ce que tu pourrais nous poster ton code complet avec le create et pas uniquement le define ?

  7. #7
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    614
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 614
    Points : 193
    Points
    193
    Par défaut
    Est-ce que le Define de la grille suffit ? car le Create utilise des configs et du coup faudrait mettre pas mal de code.
    Je mets aussi l'appel au Load dessous.

    Le Create:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
            var myInfGrid = this.getRefInfGridPatent();
            if (!myInfGrid) {
                var configs     = Ext.create('PX.ux.patent.MyPatentGridConfig');
    ...            
                hcConfig = configs.getHlpicture();
    ...
                }
     
                hcConfig.id     = 'main_patentview';
                myInfGrid       = Ext.create('PX.view.patent.MyInfPatentGrid', hcConfig);
                myWorkZoneCenter.add(myInfGrid);
            } else {
    ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    Ext.define('PX.view.patent.MyInfPatentGrid', {
        extend          : 'Ext.grid.Panel',
        alias           : 'widget.myinfpatentgrid',
        store           : 'PX.store.patent.InfPatents',
        region          : 'center',
        border          : false,
        collapsible     : false,
        animCollapse    : false,    
        expandOnRender  : true,
        bodyStyle       : 'border:0;',
     
        plugins: {
            ptype               : 'bufferedrenderer',
            pluginId            : 'buffrenderplugin',
            leadingBufferZone   : 1, // The number of records to keep rendered below the visible area.
            trailingBufferZone  : 1  // The number of records to keep rendered above the visible area.
            //,viewSize: 25
            /*
            // https://stackoverflow.com/questions/15660870/extjs-grid-renders-more-rows-than-specified-in-pagesize
            // The trick was to set the buffer settings right in both the store and 
            // the grid's bufferedrenderer plugin, and overriding the onViewResize 
            // method of the plugin. The ViewSize property of the bufferedrenderer 
            // was getting computed based on the rowheight, which for some reason 
            // was always its default value of 21, and hence resulted in a ViewSize of 60, 
            // which is greater than the total number of records in the server (50). 
            // This resulted in all the rows being fetched right away. 
            // Once I overrode the viewsize property to 18, the viewsize changed 
            // correspondingly and now I have only 30 records fetched the first time. 
            // And on-demand loading works perfectly on scrolling as well :)
            */
     
            //scrollToLoadBuffer  : 10,
            /*,onViewResize: function(view, width, height, oldWidth, oldHeight) {
                // Only process first layout (the boxready event) or height resizes.
                if (!oldHeight || height !== oldHeight) {
                    var me = this,
                        newViewSize,
                        scrollRange;
                    
                    // View has rows, delete the rowHeight property to trigger a recalculation when scrollRange is calculated
                    if (view.all.getCount()) {
                        // We need to calculate the table size based upon the new viewport size and current row height
                        delete me.rowHeight;
                    }
                    // If no rows, continue to use the same rowHeight, and the refresh handler will call this again.
     
                    // Calculates scroll range. Also calculates rowHeight if we do not have an own rowHeight property.
                    // That will be the case if the view contains some rows.
                    scrollRange = me.getScrollHeight();
                    //newViewSize = Math.ceil(height / me.rowHeight) + me.trailingBufferZone + me.leadingBufferZone;
                    
                    //console.log(height); // 634
                    //console.log(me.rowHeight); // 132
                    //console.log(me.trailingBufferZone); // 1
                    //console.log(me.leadingBufferZone);  // 1
                    //console.log(Math.ceil(height / me.rowHeight) + me.trailingBufferZone + me.leadingBufferZone); // 7
                    
                    newViewSize = 18;
                    me.viewSize = me.setViewSize(newViewSize);
                    me.stretchView(view, scrollRange);
                }
            }*/
        },
     
        bbar            : [ 
            {
                xtype   : 'tbtext',
                itemId  : 'tbipgselected',
                text    : 'No patent selected',
                style   : 'cursor:default;',
                margin      : '0 10 0 0'
            }
        ],
     
        initComponent: function() {
            var me = this;
     
            Ext.apply(me, {
                selModel    : Ext.create('Ext.selection.CheckboxModel',
                                {
                                    //checkOnly   : true //: on perd la multi-selection avec le shift :'(
                                    mode: 'MULTI'
                                }
                )
            });
            me.callParent(arguments);
            me.getStore().on('beforeload', this.clearSelection, this);
        },
     
        clearSelection: function() {
            this.getSelectionModel().deselectAll();
        },
     
        viewConfig  : {
                verticalScrollerType    : 'paginggridscroller',
                preserveScrollOnRefresh : false,
                markDirty               : false,
                loadingText             : 'Loading Patents, Please wait...', 
                listeners               : {
                    itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
                        // show the icon
                        if (Ext.isEmpty(record.get('com'))) {
                            //var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
                            var cmp = Ext.select('#' + Ext.get(item).id +' [src~="16x16/messages.png"]');
                            cmp.removeCls('x-hide-display');
                            cmp.addCls('x-grid-center-icon');
                        }
     
                        if (record.get('flag')<0) {
                            var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
                            cmp.removeCls('x-hide-display');
                            cmp.addCls('flagnb');
                        }
                    },
                    itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
                        // hide the icon
                        if (Ext.isEmpty(record.get('com'))) {
                            //var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
                            var cmp = Ext.select('#' + Ext.get(item).id +' [src~="16x16/messages.png"]'); 
                            cmp.removeCls('x-grid-center-icon');
                            cmp.addCls('x-hide-display');        
                        }
     
                        if (record.get('flag')<0) {
                            //var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
                            var cmp = Ext.select('#' + Ext.get(item).id +' [src~="16x16/flag/-1.png"]'); 
                            cmp.removeCls('x-grid-center-icon');
                            //cmp.removeCls('flagnb');
                            cmp.addCls('x-hide-display');        
                        }
                    }
                },
                trackOver               : false,
                plugins     : {
                    ddGroup             : 'ddgridPatent',
                    pluginId            : 'mydndgridPatent',
                    ptype               : 'gridviewdragdrop',
                    dragText            : 'Drop it on a Folder or a PatentList!',
                    enableDrop          : false
                }
        } 
    });

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    ...
                    myInfGrid.getStore().on('beforeload', 
                        function(store) {
                            store.getProxy().url = myurl;
                            store.getProxy().extraParams = {
                                q               : myRequest,
    ....
                            };
                        }, 
                        this
                    );
     
    ...
                    myInfGrid.getStore().load({
                        scope   : this,
                        params  : { },                
                        callback: function(records, operation, success) {
                            console.log('we searched in text field: ' + myRequest);
                            if (success) {
    ...
                            } else
                            {
    ...
                            }
                        }
                    });

Discussions similaires

  1. [2.x] Limiter à une seule entrée via doctrine?
    Par caema dans le forum Symfony
    Réponses: 5
    Dernier message: 22/10/2014, 10h32
  2. Limiter un applet à une seule instance à la fois
    Par hassanJava dans le forum Applets
    Réponses: 0
    Dernier message: 20/04/2012, 12h35
  3. Réponses: 1
    Dernier message: 24/10/2011, 11h07
  4. [Exe] Une seule application à la fois.
    Par Mister Nono dans le forum Général Java
    Réponses: 18
    Dernier message: 26/04/2004, 15h51
  5. Insérer plusieurs enregistrements en une seule requête
    Par pyd001 dans le forum MS SQL Server
    Réponses: 4
    Dernier message: 26/02/2004, 10h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo