Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

ExtJS 4.2 offre un composant Grid plus performant

Le , par vermine, Responsable JavaScript & AJAX
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
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
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.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Ingénieur intégration, validation, qualification du système de drone H/F
Safran - Ile de France - Éragny (95610)
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)
Architecte technique des systèmes d'information H/F
Safran - Ile de France - Évry (91090)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -