................... ...................

Introduction :
Ext est une bibliothque JavaScript permettant de construire des applications web interactives. C'tait, au dpart, une extension la bibliothque JavaScript YUI de Yahoo. Ext peut maintenant tre utilise avec les bibliothques Prototype, JQuery ou encore toute seule. Ext apporte un certain nombre de composants visuels d'une grande qualit comme des champs de formulaires avancs, des arbres, des tableaux, menu et barre d'outils, onglets, botes de dialogue. La version 2.0 est sortie le 4 dcembre 2007. Il s'agit d'une amlioration majeure de la bibliothque. Le passage la version 2.1, sorti le 20 avril 2008, s'est vu accompagner d'un changement de licence, passant de laLGPL v3 la GPL v3, ce qui souleva quelques mcontentements de la part de certains utilisateurs. La version 2.2, sortie le 4 aot 2008, apporte quelques amliorations comme la gestion de l'historique, le groupement de botes cocher/radio boutons ou encore un composant de tlchargement en amont (). Ce n'est pas une version majeure, mais elle est entirement compatible avec Firefox 3. La dernire version majeure, numrote 4.0, est sortie le 5 mai 2011. Le 9 juin 2011, pour le support de IE9, mise jour des versions : 4.0.2 et 3.4

................... Avantages de ExtJs :

ExtJS 4 a t cr avec 4 objectifs majeurs : 1) amliorer les performances 2) amliorer la stabilit 3) faciliter lapprentissage 4) faciliter lutilisation Afin datteindre ces objectifs, lquipe ExtJS a rcrit (refactoring) le code de ExtJS 3 (classes, fonctions, proprits) et revu la documentation du produit en profondeur. Notez de plus les points suivants :

Dessins & Graphes Notez la refonte du moteur de dessin (Charts) & graphe qui a t compltement rcrit en Javascript pour ExtJS 4 (ncessitait Flash sous ExtJS 3), ajoutant ainsi plus de flexibilit pour le dveloppeur pour le rendu des graphes. La mise jour des donnes peut tre automatiquement suivie par une mise jour du graphe. Chapeau ! Architecture & MVC Notez la mise en oeuvre du pattern MVC dans ExtJS. Cela va permettre diffrentes personnes dune quipe de dveloppement de travailler en mme temps sur diffrentes parties de la lapplication (Modle, vue, controlleur). De plus ExtJS propose des assistants pour la gnration de code (Application, Modle, Vue, Controleur, Store) et le Build de lapplication via JSBuilder (amliore compression pour dploiement) Thmes graphique & CSS Notez la souplesse apporte dans la possibilit de modifier le CSS et thmes de vos interfaces. En particulier via lutilisation des frameworks Compass et Saas.

...................
Ensuite le tlchargement du framework ExtJS :
Plusieurs remarques noter : Possibilit de tlcharger le kit de migration Extjs 3.x vers Extjs 4.x Possibilit de tlcharger le pack Directx : technologie de push Server cre avec ExtJS 3 Possibilit de tlcharger le pack Air : permet de transformer vos applications web ExtJS en des quivalent client lourd Possibilit de tlcharger la dernire version des branches 3.x (ici 3.3.3) et 2.x (ici 2.3.0) dExtJS Possibilit de tlcharger le JSBuilder : une application JAVA permettant de personnaliser vos livraison css et javascript. En particulier fonctionalits de compression de vos JS. Idal pour le dploiement en prod !

Alors quand on clique sur tlcharger voil ce quon obtient un fichier .rar On va crer un rpertoire lib dans www et dedans on va d zipper le fichier quon a tlcharg On ouvre notre browser et on met localhost/lib/extjs4

Analyser le contenu de ExtJs 4 GPL :

Et la on trouve quelques exemples Aprs on revient notre dossier

Fichiers racine ExtJS 4 ext-all.js (utiliser phase de dploiement) ext-all-debug.js (utiliser phase de dveloppement pour localiser erreurs. Sans commentaire) ext-all-debug-w-comments.js (utiliser phase de dvelopement. Avec commentaires) ext.js ext-debug.js index.html licence.txt release-notes.html Repertoire build Rpertoire docs : INFO : y accder via serveur web et non en double cliquant sur index.html ! Ce Docs nous permet de se documenter et de nous faciliter lapprentissage et lutilisation ainsi il nous fournit certains codes. A noter que ce Guides nexiste pas en version 3 Rpertoire examples : Contient + de 200 exemples de dmonstration extJS 4, ainsi que des extensions et plugins. Il ny en avait que 100 dans ExtJS 3. Rpertoire locale : Permet de grer de faon modulaire linternationalisation (I18N) : avoir une application multi langues. Repertoire overview Pour avoir une vue densemble de ExtJS 4. -> localhost/lib/extjs4/overview Rpertoire pkgs : Modules ExtJS packags. Utile pour le build ExtJS. Rpertoire resources : contient les feuilles de styles et les images necessaires pour utiliser les composants ExtJS. Il contient aussi (dans rpertoire css) le fichier ext-all.css, une concatenation de tous les CSS de tous les composants. Notez lutilisation des frameworks Compass & Saas. Analysez en particulier le contenu du rpertoire Saas. ExtJS 4 nous permet galement de crer nos propre thmes Rpertoire src : Code source ExtJS

Ouvre ppt.. ;;

Dploiement Hello ExtJS avec ExtJS 4 :

Crez un rpertoire test la racine de votre serveur web. Tlchargez le document suivant qui contient lunique fichier du projet Et on le dzippe dans le fichier test On ouvre le fichier index.html On remarque : vous approchez la souris de len tte
vous approchez la souris de la croix de fermeture ? vous approchez la souris du bouton OK ? en faisant un glisser-dposer de la bote, possible de sortir la bote de la zone du navigateur ?

et maintenant nous allons analyser le code source : <link rel="stylesheet" type="text/css" href="c:/wamp/www/lib/extjs4/resources/css/ext-all.css" />
1 : le fichier /resources/css/ext-all.css (prsent dans ExtJS 3 et ExtJS 4) concatne tous les css de tous les composants visuels dExtJS. Sans la prsence de ce fichier, voici quoi ressemble lcran.

2 : extjs-base.js contient les fonctionalits centrales dExtJS , et fournit une interface pour communication avec le navigateur. Ce fichier changerait si on voulait intgrer JQuery ou Prototype avec ExtJS REMARQUE : le rpertoire adapter nexiste pas sous ExtJS 4. 3 : ext-all-debug.js/ext-all.js (prsent auussi dans ExtJS 4) : les composants visuels sont l ! mode debug lors du dveloppement. 4 : ExtJS utilise en interne une image de 1*1 pixel pour assurer fonctionnalit de compatibilit CSS inter navigateur. 5 : Cest ici , en une ligne, que nous crons notre bote de dialogue . Nous utilisons la fonction alert de lobjet Ext.Msg , qui prend en paramtre une fonction. Notre fonction anonyme sera appele par ExtJS aussitt que tous les objets DOM de la page seront chargs. Cest l un service rendu par Ext.onReady . 6 : Notre page est vide.