Bonjour,

Dans le cadre d'un projet web, je dois utiliser la librairie extjs pour afficher une icone de chargement lors du chargement de ma page.

Mon écran est structuré en plusieurs blocs correspondant à des div. Chaque bloc devra être chargé en désynchroniser (càd que mes différents blocs ne se chargeront pas en même temps). Je compte utiliser la méthode Update de extJs mais je ne sais pas comment faire. En effet, dans les exemples disponibles sur le site, ce ne sont pas des div mais des composants ext qui sont utilisés, alors comment faire la même chose pour le chargement d'un div ?

J'espère que vous avez compris ce que je voulais dire (c'est pas easy à expliquer lol), donc si quelqu'un a déja utilisé extjs, je veux bien des conseils.

PS : voici l'exemple sur lequel je me base : http://extjs.com/deploy/dev/examples/form/xml-form.html

Merci d'avance.

"je dois utiliser la librairie extjs pour afficher une icone de chargement lors du chargement de ma page."

Heu, tu utilises cette lib juste pour afficher un loader au chargement de ta page ?

En fait, plus que pour afficher une icone au chargement, je voudrais utiliser extjs pour faire du chargement désynchronisé entre mes différents div. Et du coup les div se chargeront probablement différement (certaines infos sont plus longues que d'autres à récupérer) et là on pourrait alors voir une icone de chargement. Mais à la limite l'icone de chargement je m'en fiche un peu si ça te gène

Voila ce que j'ai essayé :

Dans un fichier js :

Ext.onReady(function(){
   
    Ext.get("maDiv").load({
            url: "http://www.orange.fr",
            scripts: true,
            text: "Loading Foo..."
    });
});

Et dans mon html j'ai mis :
...
<div id="maDiv"></div>
...

je pensais qu'en faisant ça ça me chargerait la page orange.fr dans ma div, et que pendant le temps de chargement ça écrirait "Loading foo..." mais non

Il faut que tu définisses tes besoins. ExtJs est une librairie très puissante mais destinée au développement de webapp pure et dur. Il regorge d'outils telles que le tri des tableaux, les gestions des onglets/fenêtres, la mise en forme des formulaire etc... As tu réellement besoin de cette lib ? Si ce n'est pas le cas, je te conseilles de te diriger vers des lib moins spécifiques telles que Mootools ou Prototype.

Si par contre, tu utilises les fonctionnalités de ExtJS, il me semble que la lib est compatible avec Pratotype. Dans ce cas tu dois pouvoir faire :

Ext.get("maDiv").load({
            url: "http://www.orange.fr",
            scripts: true,
            onLoading: function(){
                /* ici un script qui te centre un message au centre de l'écran */
            },
             onSuccess: function(response){
                /* ici un script pour masquer le message au centre de l'écran */
             }
    });
});

Ca reste à confirmer car je ne connais pas cette lib en profondeur.

J'ai essayé le onLoading et le onSuccess mais le navigateur n'a pas l'air de l'interprété. J'ai essayé un truc comme ça :

Ext.get("maDiv").load({
            url: "http://www.orange.fr",
            scripts: true,
            onLoading: function(){
                <h1>Chargement...</h1>
            },
             onSuccess: function(response){
                <h1>Fin</h1>
             }
    });
});

Mais je ne vois pas à quoi sert l'url puisqu'il ne l'affiche pas :( Moi je voudrais que ça affiche juste la page de l'url. D'apres Firebug, ma page est chargé (orange.fr) mais ça ne me l'affiche pas !

dans IE il faut activer l'accès aux source de données sur plusieurs domaines
c'est dans Options Internet -> Sécurité -> Personnaliser le niveaux -> Divers

Sur Firefox je ne sais pas ou

En effet seules les URL locales fonctionnent, a priori ce serait dû à une protection JavaScript ;)

Non c'est le navigateur qui les bloquent.
tu peux les activer en faisant la manip que j'ai mentionné au dessus