Tutoriel ExtJS N°1 : première application ExtJS 6

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
- Partie 3 : analyse

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

PNG - 105.1 ko

- Remplissez le formulaire de demande d’une version d’essai.

- Vous recevrez par mail un lien pour télécharger le zip suivant

PNG - 3 ko

à l’intérieur, vous trouvez ceci :

PNG - 1.9 ko

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 :

PNG - 10.1 ko

Partie 2 : Arborescence application ’Hello ExtJS 6’

Téléchargez le livrable suivant ’helloextjs’

Zip - 1.1 ko
helloextjs

- Dézippez dans le répertoire www de WAMP

PNG - 3 ko

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

PNG - 13.9 ko

— 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

PNG - 75.7 ko

— 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

PNG - 16.1 ko

— 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 :

PNG - 98.9 ko

- 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)

PNG - 98.1 ko

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

PNG - 222.7 ko
tutoriel-extjs-6-0-installation-9

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

PNG - 173.7 ko

- 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’

PNG - 10.3 ko

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.

JPG - 24.7 ko

Pour aller plus loin

- Choix N°1 : Notre tutoriel ExtJS N°2 "premières interactions utilisateur"

- Choix N°2 : Assistez à notre Petit-déjeuner ExtJS 6

- Choix N°3 : Inscrivez-vous à notre formation ExtJS 6

- Choix N°4 : Contactez notre expert ExtJS Douglas MBIANDOU

ANNEXE

Hello ExtJS 5.1

Zip - 1 ko
helloextjs-extjs5