Discussion :

[Mako 5013]

Bonjour,

J'ai actuellement un écran assez chargé, avec notamment plusieurs combobox qui contiennent beaucoup d'éléments. Tout cela fait que ma page met 2-3 secondes à s'afficher (entre l'affichage du HTML et celui du Ext JS).

Ce que je voudrais, c'est affiché une petite fenêtre qui signale simplement à l'utilisateur que le chargement est en cours, et qu'il doit patienter. Et faire en sorte que la fenêtre se ferme lorsque les autres composants Ext JS sont chargés.

Merci.

Mako

[takitano]

bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Attendez moi ... chui trop lent !!! "});
myMask.show();
myMask.hide();//quand c'est fini ...

[Mako 5013]

Cela ne fonctionne pas, mais alors pas du tout...J'ai une erreur de la part de IE (6, ceci expliquant peut-être cela...), me disant en gros "Operation aborted".

Je ne suis pas sûr que ce que je fasse soit très académique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var myMask = new Ext.LoadMask(
     Ext.getBody(),
     {msg:"Attendez moi ... chui trop lent !!! "}
);
myMask.show();
Ext.onReady({
     myMask.hide();
     //le reste de mes traitements Ext JS
});

Mako

[takitano]

alors, la fonction onReady est appellé lorsque toute la librairie extjs est chargée ... si tu instancies un objet extjs alors que la lib n'est pa stotalement chargé ... tu as de forte chance d'avoir une erreur ... !

tu y es presque ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var myMask = null;
Ext.onReady({
 
myMask  = new Ext.LoadMask(
     Ext.getBody(),
     {msg:"Attendez moi ... chui trop lent !!! "});
myMask.show();
 
// je mets tout mon code ...
     //le reste de mes traitements Ext JS
 
//fin de tout mon code
     myMask.hide();
 
});

[Mako 5013]

alors, la fonction onReady est appellé lorsque toute la librairie extjs est chargée ... si tu instancies un objet extjs alors que la lib n'est pas totalement chargé ... tu as de forte chance d'avoir une erreur ... !

Ok, j'avais mal interprété le fonctionnement de Ext.onReady.

Cela fonctionne mieux (je n'ai plus d'erreurs, ni de IE, ni JS), mais par contre, je ne vois rien pendant le chargement.
Le problème vient peut-être du fait que ma page html est constituée d'un header, d'un menu et d'une zone principale. Le code Ext JS dont il est question se situe dans la JSP correspondant à la zone de travail (du coup, pendant ce temps, on voir par exemple la couleur du background des autres parties de la page). Pas sûr d'avoir été clair...

Mako

[takitano]

une image ... ?

[Mako 5013]

Voici une image :



Ce que je voudrais, c'est dans la zone de travail (qui est régie par mon fichier jsp où se trouve le code ExtJS) s'affiche une pop-up, ou tout du moins un message, indiquant que le chargement est en cours.

Mako

[takitano]

ok ...

ben tu remplaces Ext.getBody() par l'id de ta "zone de travail" ... et mymask devrait fonctionner uniquement sur ta zone de travail /...

[Mako 5013]

ben tu remplaces Ext.getBody() par l'id de ta "zone de travail" ... et mymask devrait fonctionner uniquement sur ta zone de travail /...

J'ai déjà essayé bien entendu...Mais rien n'y fait, j'ai toujours comme unique fond pendant tout le chargement cette couleur jaunâtre...

Mako

Edit: Deux pistes. Première, j'utilise IE 6 (contrainte client).
Deuxièmement, j'utilise un système de template. J'ai une jsp (disons template.jsp). Dans template.jsp, je définis des zones où importer d'autres jsp (système tiles de Struts), notamment header, menu et main. Mon code Ext JS est dans un fichier monFicher.jsp, qui va être inclus dans en tant que main. Du coup, peut-être que mes css de mon template.jsp prennent le dessus sur mon Ext JS de monFichier.jsp...

[Mako 5013]

Bon, ce n'est pas la deuxième piste en tout cas...J'ai supprimé tous les fichiers css autres que ceux de Ext JS de ma page monFichier.jsp et de template.jsp, et toujours rien (par contre, le reste de la page est tout blanc, ce qui est normal).

Donc je ne vois pas ce qui pourrait causer le soucis à part peut-être IE 6, mais je l'avoue, c'est un peu la solution du désespoir...(surtout que je n'ai pas d'erreurs JS...).

Mako

[Mako 5013]

Problème en partie résolu...

En fait, le retard à l'affichage ne venait pas réellement des composants Ext JS en eux-mêmes, mais principalement de combobox qui étaient longues à charger leurs éléments (plusieurs milliers). Pour contourner ceci, grâce à Takitano (encore merci), on peut faire comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var masque = null;
function monCode() {
     // On met ici tout le code Ext JS de la page (tous les composants)
     mask.hide();
};
Ext.onReady(function() {
     mask = new Ext.LoadMask(
          Ext.getBody(),
          {msg: 'Loading...'}
     );
     mask.show();
     var task = new Ext.util.DelayedTask(monCode);
     task.delay(5000);
});

Alors certes, ce n'est pas super élégant, mais ça a le mérite d'être transparent pour l'utilisateur (la période de chargement est toujours présente, mais on peut voir notre mask pendant ce temps).

Mako