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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

Fenêtre d'attente avant chargement


Sujet :

Ext JS / Sencha

  1. #1
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut Fenêtre d'attente avant chargement
    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

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    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 ...

  3. #3
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut
    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

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    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();
     
    });

  5. #5
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut
    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

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    une image ... ?

  7. #7
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut
    Voici une image :

    Nom : ExtJS_bug3.JPG
Affichages : 217
Taille : 30,0 Ko

    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

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    ok ...

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

  9. #9
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut
    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...

  10. #10
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut
    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

  11. #11
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2010
    Messages
    394
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2010
    Messages : 394
    Points : 1 212
    Points
    1 212
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 24/08/2010, 18h19
  2. image d'attente avant chargement complet d'une page
    Par kamclasse dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 31/01/2009, 15h00
  3. [Socket] Attente avant l'envoi ?
    Par Invité dans le forum C++
    Réponses: 1
    Dernier message: 21/09/2005, 19h59
  4. Destruction automatique d'une fenêtre d'attente
    Par Depteam1 dans le forum MFC
    Réponses: 4
    Dernier message: 20/09/2005, 14h40
  5. fenêtre d'attente dans un thread
    Par KRis dans le forum Langage
    Réponses: 3
    Dernier message: 25/08/2005, 11h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo