Avec Objis, spécialiste formation ExtJS, crééz votre première application ExtJS 6 (Démo). Découvrez la classe Ext.window.Window : propriétés, méthodes, évènements. Modifiez les propriétés par défaut d’une fenêtre ExtJS 6.
Prérequis
Connaissances HTML, javascript.
Objectifs
Comprendre les étapes de codage d’une application ExtJS simple
Comprendre la différence entre lancement via serveur http et appel direct
Programme
Partie 1 : Téléchargement ExtJS et installation serveur web
Partie 2 : préparation arborescence application
Durée
30min
Partie 1 : Téléchargement ExtJS 6 et Installation serveur web
Allez sur la page de téléchargement du framework ExtJS : http://extjs.com/products/extjs/download.php
Remplissez le formulaire de demande d’une version d’essai.
Vous recevrez par mail un lien pour télécharger le zip suivant
à l’intérieur, vous trouvez ceci :
C’est le fichier ext-6.0.0-trial.zip qui nous intéresse.
Installez un serveur web type Apache/IIS. Nous avons installé WAMP5, qui est un serveur apache/php/mysql.
WAMP s’installe par défaut dans le répertoire c:wamp.
Créez un répertoire ‘lib’ dans le répertoire ‘www’ de WAMP
Dézippez ExtJS 6 dans ‘lib’ et renommez le répertoire ‘extjs’. Vous obtenez l’arborescence suivante :
Partie 2 : Arborescence application ‘Hello ExtJS 6’
Téléchargez le livrable suivant ‘helloextjs’
Dézippez dans le répertoire www de WAMP
La page principale de l’application (index.html) affiche une fenêtre dont le contenu est encapsulé dans une autre page (objis.html).
Partie 3 : Analyse
Rendu visuel
— REMARQUE 1 : Appel de la page via barre d’adresse navigateur à partir d’une requête http. Si double-click direct sur la page, alors ExtJS ne saura trouver la page bonjour.html constituant le corps de la fenêtre.
— REMARQUE 2 : par défaut vous pouvez modifier la taille de la fenêtre ainsi que glisser/déposer
Page html
— Ligne 7 : la feuille de style theme-classic-all-debug.css concatène toutes les feuilles de style de tous les composants graphiques d’ExtJS (boutons, labels, panels,…)
— Ligne 8 : La librairie ext-all-debug.js est utilisée uniquement en phase de développement, pour des besoins de déboguage. Elle concatène l’ensemble des composants visuels d’ExtJS. Elle permet de récupérer (par exemple dans FireBug) des informations en cas d’erreur.
— Ligne 9 : Lien vers un script js spécifique à l’application. ici helloExtJS6.js (voir ci-dessous). C’est ici que va se créer la fenêtre.
script
— Ligne 2 : Ext.create : instanciation ‘directe’ d’une fenêtre à partir du constructeur de la classe Window d’ExtJS.
— Ligne 3 : l’identifiant de la fenêtre permettra de faire référence à la fenêtre via Ext.getCmp(‘maFenetre’);
— Ligne 13 : pour voir la fenêtre créée
— Ligne 14 : Ext.onReady() permet de garantir que le code de la fonction en argument ne sera lancé que lorsque le DOM de la page index.html sera chargé par le navigateur.
QUESTION 1 : à quoi sert l’attribut ‘layout’ ? A quoi correspond la valeur ‘fit’ ?
QUESTION 2 : à quoi sert l’attribut ‘loader’ ?
Mettez en évidence le temps total de chargement de la page :
Quel fichier met le plus de temps à charger ?
Quel est l’impact du remplacement de ext-all-debug.js par ext.all.js ? (faire CTRL+F5 après modification des sources intex.html)
Comprendre l’Objet Ext.window.Window
La documentation ExtJS va nous permettre de mieux comprendre l’Objet Ext.Window utilisé ci-dessus.
Accédez à la documentation de la classe Ext.window.Window
QUESTION : Expliquez les différentes sections de la colonne de droite :
1) ALTERNATE NAMES
2) HIERARCHY
3) INHERITED MIXINS
4) REQUIRES
5) SUBCLASSES
6) FILES
A partir du menu ‘configs’ (haut fenêtre centrale), précisez le rôle et la valeur par défaut des propriétés ‘configd’ suivantes :
— resizable
— draggable
— maximized
Modifiez le code de création de la fenêtre afin qu’on ne puisse pas faire de glisser-déposer de la fenêtre par défaut, ni redimensionner la fenêtre.
A l’aide du menu ‘methods’ de l’objet Window, citez 3 méthodes de cet objet.
A l’aide du menu ‘events’ de l’objet Window, citez 3 évènements gérés par cet objet.
Expliquez le role de la combobox ‘show’
Conclusion
Dans ce tutoriel, vous avez créé votre première application ExtJS 6. Vous avez compris l’importance de la documentation , ainsi que les notions clés permettant de démarrer un projet ExtJS 6.
Pour aller plus loin
Choix N°1 : Notre tutoriel ExtJS N°2 « premières interactions utilisateur »
ANNEXE
Hello ExtJS 5.1