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

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

tutoriel-extjs-6-0-telechargement.png

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

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

tutoriel-extjs-6-0-installation.png

à l’intérieur, vous trouvez ceci :

tutoriel-extjs-6-0-installation-2.png

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 :

tutoriel-extjs-6-0-installation-3.png

Partie 2 : Arborescence application ‘Hello ExtJS 6’

Téléchargez le livrable suivant ‘helloextjs’

helloextjs

Dézippez dans le répertoire www de WAMP

tutoriel-extjs-6-0-installation-3bis.png

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

tutoriel-extjs-6-0-installation-6.png

— 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

tutoriel-extjs-6-0-installation-4.png

— 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

tutoriel-extjs-6-0-installation-5.png

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

tutoriel-extjs-6-0-installation-7.png

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)

tutoriel-extjs-6-0-installation-8.png

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

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

tutoriel-extjs-6-0-installation-10.png

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’

tutoriel-extjs-6-0-installation-11.png

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.

formation-sencha-extjs-objis.jpg

Pour aller plus loin

Choix N°1 : Notre tutoriel ExtJS N°2 « premières interactions utilisateur »

ANNEXE

Hello ExtJS 5.1

helloextjs-extjs5

2018-01-30T12:30:24+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java