Discussion :

[Bruno13]

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'
    }]
 });

[Showie]

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

viewSize: 25,

[Bruno13]

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',

[Showie]

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 ?

[Bruno13]

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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
                newViewSize = 18;

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 !

[Showie]

Est ce que tu pourrais nous poster ton code complet avec le create et pas uniquement le define ?

[Bruno13]

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
                        {
...
                        }
                    }
                });