Discussion :

[Mako 5013]

Bonjour,

Je suis actuellement en train de faire une sorte de migration d'une application existante (J2EE, STRUTS, JSP) pour inclure Ext JS pour toute la partie présentation. Tout se passait bien (ou presque), mais plus j'avance, plus j'ai un problème évident de performance. En effet, le chargement de mes pages est vraiment lent (plusieurs secondes), et même une fois ce long chargement effectué, la première fois que je passe sur un bouton par exemple, je dois encore attendre plusieurs secondes pour que le tooltips apparaissent (idem pour dérouler la première combo, le premier menu contextuel, etc.).

J'aimerais comprendre d'où peut venir un tel problème, qui est bien trop handicapant pour les clients. Une première piste pourrait venir de l'architecture de mes écrans. En gros, j'ai une page jsp qui me définit trois parties (avec un viewport), dans lesquelles je charge d'autres pages jsp, dans lesquelles je peux également avoir de l'Ext JS. Donc au final, le code source de ma page html comporte plusieurs ext.onReady, et je me demandais si cela pouvait être un élément de réponse.

Merci à tout ceux qui auront eu le courage de lire jusqu'ici, et qui pourront m'éclairer sur ce problème.

Mako

[takitano]

Ola,

Je ne sais pas trop koi t'indiquer ...
Ca arrive d'avoir des ralentissement ...
je ne pense pas que ce soit les onready ...

tu dois avoir des fonction qui doivent tourner dans le vide ...
sur une action, par exemple un click,
mesure le temps de chaque fonction appelé afin de déterminer les endroit ou ca ram ...

[Mako 5013]

Bonjour,

Ca arrive d'avoir des ralentissement ...
je ne pense pas que ce soit les onready ...

C'est plus que des ralentissements à ce niveau-là...Entre 3 et 5 secondes d'attentes pour le premier tooltip/menu contextuel/liste de combo...

Par contre, cela me rassure que les onReady n'en soient pas la cause.

tu dois avoir des fonction qui doivent tourner dans le vide ...

Je ne pense pas. J'ai vraiment très peu de fonctions, qui sont très simples et ne sont appelées qu'en réponse à un évènement (clic sur un bouton le plus souvent).

sur une action, par exemple un click,
mesure le temps de chaque fonction appelé afin de déterminer les endroit ou ca ram ...

Ça rame à deux moments. Le chargement de la page est très lent (plusieurs secondes, et il n'y a pas d'images/vidéos ou autres), et comme mentionné ci-dessus, l'initialisation des tooltips, des menus contextuels ou encore des listes de combo est également handicapant.

Est-il possible qu'il y ait une histoire de cache qui intervienne ? En tout cas, toutes les pistes sont les bienvenues...

Mako

[takitano]

ok ...

2 questions me viennent a l esprit ...

1. combien de panels (ou elements similaire comme le formPanel, grid ...) sont généré ?
2. Est ce que tout les tootip, menuContext sont généré dans le onReady ?

[Mako 5013]

1. combien de panels (ou elements similaire comme le formPanel, grid ...) sont généré ?

Au final, sur une page, j'ai mes trois régions (un panel par région). Puis, à l'intérieur de tout ça, j'ai 3-4 panels (formPanel et gridPanel inclus). Donc un total de 6-7 panels en prenant en compte tous les niveaux.

2. Est ce que tout les tootip, menuContext sont généré dans le onReady ?

Les tooltips sont simplement des attributs donnés lors de la création de mes panels, pour les boutons. Par exemple, pour un formPanel, j'ai deux boutons (submit et réinitialiser), déclarés comme suit :

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 formPanel = new Ext.form.FormPanel({
     // Config de mon formPanel
     items: [{
          // les éléments de mon formPanel
     }],
     buttons: [{
          text: 'Submit',
          tooltip: 'Envoyer votre formulaire',
          handler: function {
               formPanel.submit();
          }
     }]
});

Tout ceci étant dans mon onReady() bien entendu. Pour ce qui est du menu contextuel, c'est dans ma grille, et il est déclaré un peu de la même manière :

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 gridPanel = new Ext.grid.GridPanel({
     // Config de ma grille
     listeners: {
          rowcontextmenu: function(grid, index, event) {
               var menu = new Ext.menu.Menu({
                    style: 'overflow: visible',
                    items: [{
                         // Plusieurs 'textfield' avec gestion du onClick
                    }]
               });
          }
     }
});

J'avoue que c'est sans doute assez laid comme façon de procéder...

Mako

[takitano]

avec mon premier post, essayes de trouver l'origine de ton problème ...

[takitano]

Alors t as réglé ton pb ... ?

si tu veux, je suis dispo ...

[Mako 5013]

Alors, le problème est-il réglé ? Oui et non...

Oui, parce que les temps de chargement/initialisation sont beaucoup moins intrusifs (sans doute parce que désormais, quand je fais des tests de performance, je le fais en ne lançant pas mon serveur en mode debug...).

Non, parce qu'il y a toujours un petit temps (une à trois secondes) pour la première initialisation de tooltips/menu contextuel/liste de combobox, et je ne vois pas trop d'où ça vient...

Mako

[takitano]

et si tu vire les tooltip et les context menu , ca marche bcp mieux ... ?

[Mako 5013]

Actuellement, le chargement d'une page, bien qu'il ne soit pas instantané, est tout à fait acceptable (compte tenu des données serveur qui sont chargées dedans). Ce n'est plus quelque chose que j'essaie d'améliorer.

Pour tout ce qui est tooltip/menu contextuel/liste de combobox, je ne pense pas que cela influe au chargement de la page. Par contre, quand ma souris va survoler pour la première fois un contrôle avec un tooltip, celui-ci va mettre entre une et trois secondes à s'afficher (avec le petit sablier sur la flèche de la souris), idem pour l'ouverture d'une combobox, ou bien le déroulement de mon menu contextuel. Alors forcément, si je les supprime, je n'ai plus de soucis, mais ce n'est pas le but.

Mako

[takitano]

bonsoir,

pour améliorer la vitesse de ton context menu(CM),

tu devrais créer tes CM dans le renderer de ton grid panel (en supposant que le contenu de ton CM est fonction de la ligne de ta grid ... ).

ta une fonction callback normalement dans ta columnModel, et tu peut rajouter l'attribut renderer ...

le resultat est que tes CM sont créer lors du chargement de ton tableau, et tu ne devrais plus attendre 3 s ...

[Mako 5013]

tu devrais créer tes CM dans le renderer de ton grid panel (en supposant que le contenu de ton CM est fonction de la ligne de ta grid ... ).

Oui et non...Le contenu du CM est fixe, mais j'ai besoin de récupérer l'index de la ligne (j'appelle une autre fonction qui en a besoin).

Est-ce que tu pourrais détailler un peu ton idée de fonction callback dans le columnModel ? Cela m'intéresse, mais je ne vois pas trop où tu veux en venir...

Merci.

Mako

[takitano]

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
20
21
22
23
24
25
// tableau de CM en fonction de l'indice
var tabCM=new Array();
 
//mon callback
var createCM=function(val,x,store){
tabCM.push(new Ext.menu.Menu({
                    style: 'overflow: visible',
                    items: [{
                         // Plusieurs 'textfield' avec gestion du onClick
                    }]
);
}
 
var gridPanel = new Ext.grid.GridPanel({
        columns: [
           {header: "id", dataIndex: 'id',renderer:createCM},...]
 
     // Config de ma grille
     listeners: {
          rowcontextmenu: function(grid, index, event) {
               tabCM[index];
               });
          }
     }
});

[Mako 5013]

Ok, je comprends ce que tu veux faire...Malheureusement, cela ne fonctionne pas...

Le coup du renderer dans le columnModel, je sceptique tout de même...

Mako

[takitano]

ok ...

j'ai jamais essayer cette technique ... peut etre que ca ne marche pas ... mais, je ne vois pas pkoi ...
il faut peut etre mettre tabCM[index];
par tabCM[index].show();

[Mako 5013]

J'avais essayé le .show() à la fin dans la fonction createCM (à la fin de la déclaration du menu), sans succès.

Pour le tabCM[index].show(), c'est encore pire, puisque cela me provoque une erreur (tabCM[...] is null or not an object).

A moins d'une nouvelle idée, je vais laisser tomber je pense, étant donné que je suis passé d'un "gros" problème de performance à un "petit" problème...

Mako

[takitano]

ok ...

ben fo mettre resolu alors ...