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

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

ExtJS 4.2 offre un composant Grid plus performant

Le , par vermine

0PARTAGES

1  0 
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.

Une erreur dans cette actualité ? Signalez-nous-la !