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]

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