ExtJS 4.2 offre un composant Grid plus performant


La version de ExtJS 4.2 est en Beta. Cependant, nous pouvons déjà découvrir un changement important : la Grid. Ses performances ont été améliorées.

En ce qui concerne le scroll des lignes, le résultat n'est plus entièrement recréé. Les lignes qui deviennent invisibles sont supprimées et celles qui doivent apparaitre sont créées à ce moment-là.


Toutes les lignes de la grille de ExtJS 4.1 sont jetées et recréées pendant le défilement dans les zones tampons.


ExtJS 4.2, les lignes sont ajoutées ou retirées de la grille pendant le défilement. Les lignes intermédiaires ne sont pas affectées.

Cette optimisation se traduit par une diminution significative de la latence de l'affichage et d'une augmentation subséquente des performances.


Ext.grid.plugin.BufferedRenderer

Pour accéder à la mémoire tampon pour obtenir une grille de ExtJS 4.1, nous devions définir manuellement un store de données avec une configuration « tampon » de sorte qu'elle interagisse avec la molette pour la pagination. Cela signifiait qu'un store peut être défini comme :

Code javascript : 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
// Ext JS 4.1 style buffering on the store
var store = Ext.create('Ext.data.Store', {
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
 
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    //etc...
});

Alors que la config « tampon » était un moyen pratique pour optimiser les performances de nos banques de données, cela signifiait aussi que la banque était profondément consciente de comment ses données devaient être affichées. Comme certains composants pourraient partager un store de données, définitir la fonctionnalité de mise en mémoire tampon au niveau de la banque pourrait être problématique.

En outre, les stores dans la mémoire tampon de ExtJS 4.1 rencontrent des problèmes lorsque les utilisateurs éditent des enregistrements dans la grille. Parce que seules les lignes affichées existent dans la collection d'enregistrements principale du store (les enregistrements non-affichés sont cachés), modifier les enregistrements et la synchronisation des données est alors devenu un défi.

ExtJS 4.2 résout ce problème en introduisant le plugin Ext.grid.plugin.BufferedRenderer. Ce plugin permet au store d'ignorer l'affichage, le composant Grid est désormais seul responsable de la mise en mémoire tampon de l'affichage de ses données.

Code javascript : 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
// new Ext JS 4.2 Ext.grid.plugin.BufferedRenderer
Ext.require([
    'Ext.grid.plugin.BufferedRenderer'
]);
var store = Ext.create('Ext.data.Store', {
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
 
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    plugins: 'bufferedrenderer',
    //etc...
});

Cette grille affiche un tableau partiel mais elle supprime les configurations supplémentaires pour le store de données. Cela signifie également que toutes les fonctionnalités de grille/store (par exemple de regroupement d'éditions) fonctionnera sans problème avec ce plugin. Et parce que la fonctionnalité de mise en mémoire tampon n'est plus définie sur le store, les fonctionnalités normales (édition/sauvegarde/synchronisation) sont toutes possibles en même temps.

Cela dit, la technique de ExtJS 4.1 existe toujours. Le nouveau plugin est simplement une autre implémentation avec des améliorations de performance supplémentaires.


Télécharger ExtJS 4.2 Beta.
L'article de présentation.