Grid ExtJS avec un large nbre de colonnes (dynamique)
Bonjour,
Je souhaite créer un tableau avec le composant Sencha ExtJS grid avec un nombre de colonnes dynamiques (de 20 jusqu'à ~ 150 colonnes) selon un filtre de sélection avec un nombre de lignes de plusieurs centaines.
Mon programme fonctionne avec des données au format json (tableau avec 3 champs : description des colonnes, la liste des champs et les données) envoyées par le serveur.
L'appel au serveur se fait avec jquery et les données sont parsées avec $.parseJSON.
Le problème est que lorsque le nombre de colonnes est de l'ordre de 50 et pour une dizaine de lignes, le traitement se bloque côté client (les données json sont bien chargées) avec un message du navigateur indiquant que le framework extjs plante!
La fonction ExtJs affichant ma grid est la suivante :
Le paramètre donnees correspond aux données json reçues et parsées et selector est l'id du conteneur pour la grid.
1ere version :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| function ExtjsDatables(donnees, selector){
Ext.create('Ext.data.Store', {
storeId: 'st',
fields: donnees['fields'],
data: donnees,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
}
});
Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('st'),
columns: donnees['columns'],
width: 1199,
height: 396,
renderTo: Ext.get(selector)
});
} |
2eme version
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function ExtjsDatables(donnees, selector){
Ext.define('DT', {
extend: 'Ext.data.Model',
fields: donnees['fields']
});
var userStore = Ext.create('Ext.data.Store', {
model: 'DT',
data: donnees['data']
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.get(selector),
store: userStore,
width: 1199,
height: 396
,columns: donnees['columns']
});
} |
Ma question est de savoir si, il est possible de créer avec Extjs une grille avec
ces caractéristiques pour des données importantes sans avoir de bug à chaque fois. Si oui, avez-vous une autre approche ?
Merci par avance de votre participation.
