Tutoriel Introduction à ExtJS

Introduction au framework
Javascript EXT JS
Par Gilles Février (http://gfevrier.kelio.org/blog)
VERSION 1.0 (Mai 2014)
1 / 14
SOMMAIRE
Sommaire
Introduction....................................................................................................................................................... 3
Présentation rapide du framework javascript ExtJS.......................................................................................... 3
Récupération, installation et configuration de ExtJS......................................................................................... 4
Premiers pas..................................................................................................................................................... 4
La première fenêtre........................................................................................................................................... 5
Notions de base : composant, conteneur et layout........................................................................................... 6
Manipulation du DOM....................................................................................................................................... 7
Gestion des événements.................................................................................................................................. 8
Un formulaire Ajax facile................................................................................................................................... 9
Conclusion...................................................................................................................................................... 13
L'auteur........................................................................................................................................................... 14
Contact........................................................................................................................................................... 14
2 / 14
Introduction
Si vous avez déjà été amené à développer une application web interactive, avec une interface utilisateur
riche et complexe comprenant des menus, des onglets, des tableaux de données, des formulaires
dynamiques, des fenêtres ou des boîtes de dialogue, des widgets... vous vous êtes rendu compte de la
difficulté à gérer les différentes couches, à programmer les interactions avec l'utilisateur, le tout en
garantissant une compatibilité avec les différents navigateurs...
Nous allons découvrir dans ce tutoriel le framework javascript ExtJS qui devrait grandement vous simplifier la
vie pour le développement de ce type d'application. Ce framework étant extrêmement riche, nous ne verrons
ici que les bases, comment installer, configurer et utiliser ExtJS et nous terminerons par un exemple simple.
Présentation rapide du framework javascript ExtJS
ExtJS est un framework javascript destiné au développement d'applications web interactives avec une
interface riche (RIA). Il fournit un grand nombre de fonctions de manipulation du DOM et de composants
visuels d'une grande qualité (formulaires avancés, onglets, boîtes de dialogue, arbres, tableaux, menus...). Il
amène également une suite complète d'outils de gestion de l'interface permettant d'avoir un contrôle total sur
l'organisation et la manipulation de ses composants.
La plupart des widgets sont personnalisables, ce qui permet d'activer ou de désactiver des fonctionnalités et
d'utiliser des extensions et des plugins.
ExtJS est clairement orienté interface utilisateur et peut être utilisé avec Prototype, Jquery, Mootools ou seul.
ExtJS assure la compatibilité avec les navigateurs suivants (HTML5 est utilisé pour les navigateurs les plus
récents et des alternatives sont utilisées pour les navigateurs plus anciens) :
– Internet Explorer 6+,
– Firefox 3.6+ (PC, Mac),
– Safari 4+,
– Chrome 10+,
– Opera 11+ (PC, Mac).
Le framework est développé, maintenu et soutenu par la société Sencha Inc., basée en Californie, ainsi que
par une importante communauté, principalement anglophone.
La documentation est bien faite, accessible et assez complète (en anglais), et un certain nombre d'exemples
clairs sont disponibles. On peut compter également quelques tutoriels en anglais et en français.
Trois licences sont disponibles :
– Une licence commerciale : appropriée si vous voulez utiliser ExtJS pour développer des applications
commerciales avec du code source propriétaire,
– Une licence OEM : appropriée si vous voulez utiliser ExtJS pour créer votre propre SDK sous
licence,
– Une licence Open Source : appropriée si vous voulez utiliser ExtJS pour créer une application open
source avec une licence compatible GNU GPL v3.
La société Sencha Inc. propose également d'autres produits que nous ne détailleront pas ici (d'autant plus
qu'ils existent à la date à laquelle je rédige ce tutoriel, mais ils risquent d'évoluer, peut-être de changer de
nom, voir de disparaître) :
– Sencha Complete : solution complète de développement regroupant divers produits comme Sencha
Architect, Sencha ExtJS, Sencha Touch, Sencha Eclipse Plugin, Sencha Touch Charts, Sencha
Touch Grid, Sencha Mobile Packaging, Enterprise Data Connectors et Sencha Support Package,
– Sencha Touch Bundle : suite de développement mobile incluant Sencha Architect, Sencha Touch,
Sencha Eclipse Plugin, Sencha Touch Charts, Sencha Touch Grid, et Sencha Support Package,
– Sencha Touch : framework pour le développement d'applications mobiles (licences commerciale,
OEM et open source),
– Ext JS : bibliothèque javascript pour la création de pages web dynamiques (licence MIT open
source),
– Ext GXT : framework de développement d'applications web pour Google Web Toolkit (licences
commerciale, OEM et open source),
– Ext Architect : éditeur d'IHM pour ExtJS (version d'évaluation et licence commerciale),
3 / 14
–
–
Ext Animator : framework de création d'animations CSS3,
Ext Space : plateforme sécurisée de déploiement d'applications web.
Récupération, installation et configuration de ExtJS
Le but de ce tutoriel n'étant pas d'apprendre à installer et configurer un serveur web (vous pouvez consulter
mon tutoriel traitant de l'installation d'un serveur web de développement sous Linux avec VirtualBox, nous
partirons du principe qu'un serveur web avec PHP est disponible.
Pour nos exemples, nous utiliserons WAMP (disponible sur le site http://www.wampserver.com/).
L'installation d'ExtJS est on ne peut plus simple.
Pour
commencer,
il
vous
faut
récupérer
http://www.sencha.com/products/extjs/download/
la
dernière
version
stable
d'ExtJS
:
Une fois le téléchargement terminé, vous obtenez un fichier compressé.
Créez un nouveau répertoire à la racine de votre serveur web "extjs" (par exemple) et décompressez-y le
fichier téléchargé.
Créez un nouveau répertoire à la racine de votre serveur web, "tutoriel_extjs" par exemple.
Vous remarquerez sans doute que le volume décompressé est assez énorme pour une bibliothèque
Javascript. Si vous regardez attentivement le contenu du répertoire, vous verrez que vous avez également
décompressé des exemples, de la documentation... Bref, un certain nombre d'éléments qui n'auront pas leur
place sur un serveur de production mais qui durant la phase d'apprentissage et/ou de développement vous
seront bien utiles.
Quelques éléments importants à retenir :
– Le fichier ext-all-debug.js : contient le code source non compressé de la bibliothèque ExtJS, à
utiliser en développement.
– Le fichier ext-all.js : contient le code source compressé de la bibliothèque ExtJS, à utiliser en
production. C'est l'intégralité du framework qui sera chargé la première fois.
– Le fichier ext.js : contient le code de base qui chargera dynamiquement les composants en fonction
des besoins. Le chargement sera plus rapide dans un premier temps, mais pourra ralentir
l'application par la suite en fonction des composants à charger.
Voila, ExtJS est prêt à être utilisé !
Premiers pas...
Dans le répertoire destiné à accueillir nos fichiers sur le serveur web, nous allons créer un répertoire et deux
fichiers :
– répertoire "js" : contiendra le ou les fichiers Javascript nous permettant de manipuler les composants
ExtJS,
– "index.html" : ce fichier chargera la bibliothèque ExtJS,
– "js/test_extjs_1.js" : fichier qui contiendra tout notre code Javascript.
Dans le fichier "index.html", nous allons inclure les fichiers nécessaires à ExtJS :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Introduction à ExtJS</title>
<!-- Chargement de ExtJS -->
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<!-- Chargement des fichiers CSS -->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<!-- Chargement du code source de l'application -->
<script type="text/javascript" src="js/test_extjs_1.js"></script>
4 / 14
</head>
<body>
</body>
</html>
La première ligne est l'inclusion du fichier source principal de ExtJS qui contient le cœur de la bibliothèque.
La deuxième ligne est l'inclusion du fichier de styles utilisé par défaut.
Éditez maintenant le fichier "test_extjs_1.js" et ajoutez les lignes suivantes :
// Initialisation de l'application lorsque le DOM est complètement chargé
Ext.onReady(function(){
alert('ExtJS est correctement configuré !');
});
Nous appelons ici "Ext.onReady". C'est sans doute la première méthode qui sera appelée dans vos
applications. Les instructions comprises dans cette méthode seront automatiquement exécutées lorsque le
DOM sera entièrement chargé. Cela nous garanti que l'intégralité des éléments présents dans la page seront
disponibles au moment où ce code sera exécuté.
Ouvrez la page « index.html » dans votre navigateur, vous obtenez le résultat suivant :
Comme on peut le voir, le rendu du message généré par la fonction "alert" n'est déjà plus celui de base.
Remplacez maintenant la ligne "alert" par la ligne suivante :
Ext.MessageBox.alert('Information','Extjs4 est prêt');
Actualisez la page « index.html », le rendu n'est plus tout à fait le même :
Sans aucune peine, nous avons maintenant une boîte de dialogue nettement plus jolie que la précédente !
La première fenêtre
Maintenant que l'on sait que la bibliothèque est correctement configurée, nous allons voir comment créer une
fenêtre.
Remplacer le contenu du fichier "test_extjs_1.js" par le code suivant :
5 / 14
// Déclaration de la fonction permettant de créer un objet fenêtre
function maFenetre() {
// On instancie un objet ExtJS Window
var fenetre = new Ext.Window({
id : 'maFenetre',
// Identifiant pour le DOM
title : 'Ma première fenêtre ExtJS',
// Titre qui sera affiché
width : 350,
// Largeur de la boîte de dialogue
height : 100,
// Hauteur de la boîte de dialogue
layout : 'fit',
// Layout utilisé ("fit" = prend toute la place disponible
autoLoad : {
// Lorsque l'objet est créé, chargement Ajax automatique...
url : 'fenetre.html',
// ... de la page "fenetre.html"
scripts : true
}
});
fenetre.show();
// Affichage de la fenêtre
}
// Exécution de la fonction "maFenetre" lorsque le DOM est entièrement chargé
Ext.onReady(maFenetre);
Nous définissons ici la fonction "maFenetre" qui va ensuite être passée en paramètre à la méthode
"Ext.onReady" pour être exécutée au chargement de la page.
Dans cette fonction, nous créons une nouvelle instance d'un objet "Ext.Window" que nous appelons
"fenetre". Nous lui passons un objet de configuration (nous verrons que l'on utilise très souvent les objets de
configuration qui seront la clé de la programmation avec ExtJS) contenant toutes les propriétés dont nous
avons besoin :
id : identifiant grâce auquel notre fenêtre pourra être référencée dans le DOM par la suite,
title : titre de la fenêtre,
width : largeur en pixels de la fenêtre,
height : hauteur en pixels de la fenêtre,
layout : défini le "layout" utilisé dans la fenêtre pour gérer l'affichage des éléments qu'elle pourra
contenir (voir le chapitre sur les notions de base). Le layout "fit" permet de s'assurer que les
éléments qui seront contenus dans la fenêtre occuperont toute la place disponible.
– autoLoad : cet objet de configuration (oui, encore un) indique à la fenêtre qu'elle doit par défaut, dès
qu'elle est prête, charger automatiquement le contenu du fichier spécifié dans la propriété "url".
Une fois la fenêtre créée, il faut l'afficher. C'est le rôle de la méthode "show()".
–
–
–
–
–
Il faut également créer le fichier "fenetre.html" qui doit être affiché dans notre fenêtre. Il ne contiendra qu'une
seule ligne de code :
<!-- Contenu HTML du fichier "fenetre.html" qui sera chargé dans la fenêtre -->
<div>Ma premi&egrave;re fen&ecirc;tre avec ExtJS.</div>
Appelez de nouveau la page "index.html" dans votre navigateur. Vous obtenez le résultat suivant :
Notions de base : composant, conteneur et layout
Les composants ("component") et les conteneurs ("container") sont la clé de la gestion des interfaces
utilisateurs avec ExtJS.
Le composant défini la façon dont les widgets sont instanciés, affichés, et détruits. Tous les composants
héritent de la classe "Component". Par exemple, tous les éléments visuels de l'interface utilisateur utilisent le
6 / 14
composant "Element" ("Ext.Element"), dont nous verrons quelques exemples plus loin, ce qui en fait le
composant le plus utilisé par le cœur du framework.
Le conteneur est une zone de la page pouvant contenir des éléments visuels ou d'autres conteneurs. Il
contrôle la façon dont les widgets peuvent gérer leurs propres enfants. Tous les conteneurs héritent de la
classe "Container". Un exemple classique de conteneur est le Panel (conteneur de base dont plusieurs
autres héritent tels que GridPanel (pour les tableaux de données), FormPanel (pour les formulaires)...
Le layout contrôle l'affichage des éléments enfants d'un conteneur. Par défaut (si on ne spécifie pas de
layout), les éléments sont simplement affichés les uns en dessous des autres. On associe un layout à un
conteneur.
Les différents layout sont les suivants :
–
–
–
–
–
–
–
–
–
–
Absolute : permet de positionner les panneaux à une position précise à l'aide de coordonnées x et y,
Accordion : permet d'empiler les panneaux sous forme d'accordéon de façon à ce qu'un seul soit
visible à la fois,
Anchor : permet de dimensionner les panneaux en fonction d'un pourcentage de la largeur et/ou de
la hauteur de la page,
Border : permet de découper le conteneur en cinq régions maximum (north, east, west, south et
center). Seule la région "center" est obligatoire,
Card : permet d'afficher plusieurs éléments superposés, chacun occupant toute la place libre (des
boutons "précédent" et "suivant" permettant généralement de passer d'un élément à l'autre),
Column : permet de répartir le contenu sur plusieurs colonnes,
Fit : l'élément présent dans le conteneur occupe toute la place disponible,
Table : permet d'organiser les éléments dans une table HTML,
Hbox : permet d'arranger horizontalement plusieurs éléments,
VBox : permet d'arranger verticalement plusieurs éléments.
Manipulation du DOM
Dans une application web, vous êtes forcément amené à manipuler le DOM, dont le plus petit objet et
l'élément HTML. L'accès au DOM par le Javascript permet facilement de modifier un élément, de changer
son style, de le supprimer, d'en ajouter...
La méthode classique en Javascript pour accéder à un élément du DOM est la suivante :
var myDiv = document.getElementById('monDivId');
La méthode getElementById est suffisante pour effectuer des tâches simples comme modifier le contenu de
la propriété innerHTML ou modifier la classe css d'un élément. Mais quand il s'agit d'effectuer des tâches
plus complexes comme la gestion des événements, c'est tout de suite plus difficile, ne serait-ce que pour
assurer la compatibilité entre navigateurs.
L'objet Ext.Element est au cœur du framework et joue un rôle primordial dans son fonctionnement.
Il permet d'accéder aux éléments de la page et d'agir sur ceux-ci. La classe Ext.Element fournit un ensemble
complet d'outils permettant de gérer le DOM.
Ajoutons la déclaration de styles dans le « head » de la page « index.html » :
<!-- Style utilisé pour le "div" -->
<style type="text/css">
.monDiv {
border: 1px solid #AAAAAA;
width: 200px;
height: 35px;
cursor: pointer;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
</style>
7 / 14
Ajoutons le code suivant dans le "body" de la page "index.html" :
<!-- Déclaration du "div" qui sera manipulé avec ExtJS -->
<div id='div1' class='monDiv'> </div>
On définit un élément de type "div" de taille 200 x 35 pixels avec une bordure.
Voyons quelques exemples de manipulations simples de cet élément.
Remplacer le contenu du fichier "test_extjs_1.js" par le code suivant :
// Exécution automatique des instructions à la fin du chargement du DOM
Ext.onReady(function() {
var monDiv1 = Ext.get('div1');
// On récupère une référence à l'élément"div1"
monDiv1.setHeight(200);
// On définit sa nouvelle hauteur : 200 pixels
monDiv1.setSize(350, 350, {duration: 1, easing:'bounceOut'});
// On définit ses nouvelles
dimensions, 350 x 350 pixels, avec un effet de transition pour sa transformation
});
Que se passe-t-il lorsque l'on recharge la page ?
Si on analyse le code source ci-dessus, on distingue trois opérations :
1. Appel de la méthode Ext.get : cette méthode renvoie une instance de Ext.Element correspondant à
l'élément dont l'identifiant est "div1". A partir de là, il est facile de le manipuler.
2. Appel de la méthode setHeight : on redéfinit la hauteur de l'élément à 200 pixels. Nous avons
maintenant un carré.
3. Appel de la méthode setSize : cette fois, on redéfinit à la fois la hauteur et la largeur de l'élément
(350 x 350 pixels), en ajoutant un effet de transition (il suffit d'omettre le dernier argument pour
supprimer l'animation).
Après l'exécution du script, on obtient un carré de 350 pixels de côté.
L'objet Ext.Element comporte un grand nombre de méthodes permettant de manipuler le DOM. Il est
impossible de les énumérer ici. Le mieux est de vous rendre sur la documentation en ligne de l'API pour vous
rendre compte de la puissance de cet objet.
Parfois, il est impossible de sélectionner des nœuds du DOM par leurs ID parce qu'ils ne sont pas connus. Il
est alors possible de se baser sur un attribut ou un nom de classe CSS. Le sélecteur ExtJS DomQuery est là
pour ça.
//Surligne tous les éléments de type "p" (paragraphes)
Ext.select('p').highlight();
L'instruction ci-dessus permet d'appliquer la méthode highlight (surlignage du paragraphe) à tous les
paragraphes de la page.
Gestion des événements
L'une des tâches les plus complexes dans le développement d'une application web est la gestion des
événements. Il est indispensable de comprendre le fonctionnement des événements si l'on veut développer
une interface riche. Par exemple, comment faire pour afficher un menu contextuel sur un tableau de données
lorsque l'utilisateur utilise le clic droit de la souris sur une ligne ? Il suffit de mettre en place un gestionnaire
d'événement pour l'événement rowcontextmenu, qui créera et affichera le menu contextuel.
Les événements peuvent provenir d'une action de l'utilisateur ou de l'application elle-même.
La solution basique consiste à attacher un "listener" directement aux éléments HTML, comme l'attribut
onclick.
<!-- Gestion de l'événement "onclick" à l'ancienne -->
<div id="div1" onclick="alert(this.id + ' Clic !');">Cliquez ici</div>
Lorsque l'utilisateur clique sur l'élément "div1", un message d'alerte est affiché " div1 clic !".
8 / 14
L'inconvénient de cette méthode, standardisée par Netscape il y a des années, est qu'elle implique une
dépendance entre le HTML et le Javascript, augmentant la complexité de maintenance du code.
ExtJS fournit toutes les fonctionnalités nécessaires à une gestion avancée des événements.
//Gestion de l'événement "onclick" avec ExtJS
Ext.get('div1').on('click', function(eventObj, elRef) {
// On déclare le "listener" sur "div1" pour
l'événement "click"
alert('Clic sur div1 : ' + elRef.id);
// Code à exécuter lorsque l'utilisateur clique sur "div1"
});
La méthode Ext.get permet de récupérer une référence à l'élément "div1".
La méthode on permet de déclarer un "listener" sur l'événement "click" sur l'élément "div1".
Lorsque l'utilisateur clique sur l'élément "div1", la fonction déclarée dans le "listener" est exécutée (elle
accepte comme paramètres l'événement et la référence de l'élément) : un message d'alerte est affiché.
Un formulaire Ajax facile
Le formulaire est un élément incontournable dans une application web.
Il y a deux pratiques courantes pour échanger des informations entre le navigateur et le serveur.
La première, "à l'ancienne", consiste à soumettre le contenu d'un formulaire de façon classique : les données
sont envoyées au serveur et la page complète est rechargée avec le résultat.
La seconde, beaucoup plus élégante et pratique, consiste à utiliser un appel Ajax pour effectuer la même
opération. Un objet XMLHttpRequest est utilisé pour échanger les données avec le serveur, DOM et
Javascript sont utilisés pour modifier les informations contenues dans la page en fonction de la réponse
obtenue. Les formats XML, texte ou JSON peuvent être utilisés pour structurer les informations échangées.
La page n'est pas rechargée.
Pour illustrer la simplicité d'utilisation d'Ajax avec ExtJS, nous allons créer un formulaire.
Il contiendra trois champs :
– Nom : un champ texte permettant de saisir une chaîne de caractères,
– Prénom : idem,
– Age : un champ permettant de saisir un nombre compris entre 1 et 99.
Nous aurons un bouton "Envoyer" permettant de déclencher l'échange de données avec le serveur.
Nous allons reprendre notre fichier "index.html" et supprimer tout ce qu'il y a entre les balises "<body>" et
"</body>", et modifier le nom du fichier Javascript que nous allons charger.
<script type="text/javascript" src="js/test_extjs_ajax.js"></script>
Nous allons ensuite créer le fichier "test_extjs_ajax.js" et y copier le code suivant :
// Code exécuté lorsque le DOM est entièrement chargé
Ext.onReady(function() {
// Clic sur le bouton "Envoyer" : gestion de l'envoi du contenu du formulaire
// Création du gestionnaire d'événement associé au bouton "Envoyer"
var btnEnvoyerHandler = function() {
// (2)
// On vérifie si les valeurs saisies respectent les contraintes définies pour les champs
9 / 14
if ( Ext.getCmp('nom').validate() == true) {
// Validation du champ
// On récupère une référence à l'élement "formulaire"
var formPanel = Ext.getCmp('formulaire');
// On applique un masque au formulaire (qui devient grisé) avec un message d'attente
formPanel.el.mask('Traitement des données...', 'x-mask-loading');
// Envoi des données du formulaire
formPanel.getForm().submit({
url
: 'traitement.php',
// Url vers laquelle sont envoyées
les données
success : resultatTraitement,
failure : resultatTraitement
// Gestionnaire utilisé en cas de succès
// Gestionnaire utilisé en cas d'échec
});
}
}
// Gestion du retour de l'envoi du contenu du formulaire
// Création de la fonction gérant le retour de l'appel Ajax
var resultatTraitement = function(form, action) {
// (3)
var formPanel = Ext.getCmp('formulaire');
// On récupère une référence à notre formulaire
// On supprime le masque appliqué au formulaire (qui redevient disponible) par le
gestionnaire d'événements lors du clic
formPanel.el.unmask();
var result = action.result;
// On récupère le résultat
// Si on récupère "success : true" dans le retour Ajax
if (result.success) {
// Affichage d'une boîte de dialogue à l'utilisateur
Ext.MessageBox.alert('Traitement termin&eacute;', result.msg);
} else {
// Affichage d'une boîte de dialogue à l'utilisateur
Ext.MessageBox.alert('Echec', result.msg);
}
}
// Création du formulaire
// Création d'un objet "FormPanel" pour la gestion des éléments du formulaire
var fp = new Ext.form.FormPanel({
// (1)
renderTo : Ext.getBody(),
// Le formulaire sera affiché dans le <body>
width : 350,
// Largeur du formulaire
height : 150,
// Hauteur du formulaire
title : 'Mon formulaire Ajax',
// Titre affiché dans la barre de titre
id
: 'formulaire',
// Identifiant du formulaire pour le DOM
frame : true,
// Affichage avec des coins arrondis
labelWidth : 126,
// Largeur des libellés des champs
defaultType : 'textfield',
// Les objets seront traités comme des champs texte
items : [
// Liste des champs du formulaire
{
// Objet de type "TextField" – champ "Nom"
fieldLabel : 'Nom ',
// Champ texte "Nom"
id
: 'nom',
// Identifiant pour le DOM
allowBlank : false,
// Valeur vide interdite (champ obligatoire)
blankText
: 'Ce champ est obligatoire.'
// Texte affiché après une
validation si le champ est vide
},
{
},
{
// Objet de type "TextField" – champ "Prénom"
fieldLabel : 'Prénom ', // Champ texte "Prénom"
id
: 'prenom'
// Identifiant pour le DOM
// Objet de type "NumberField" – champ "Age"
fieldLabel : 'Age ',
// Champ numérique "Age"
id
: 'age',
// Identifiant pour le DOM
xtype
: 'numberfield',
// Type "NumberField" / champ numérique
minValue
: 1,
// Valeur minimum acceptée (pour la validation)
maxValue
: 99
// Valeur maximum acceptée (pour la validation)
}
],
buttons
{
: [
// Liste des boutons
// Objet de type "Button" – bouton "Envoyer"
text
: 'Envoyer',
// Libellé
id
: 'btnEnvoyer',
// Identifiant pour le DOM
handler
: btnEnvoyerHandler
// Gestionnaire d'événements
}
]
});
10 / 14
});
Analysons ensemble le code source de notre formulaire.
L'ensemble du code est placé dans la méthode Ext.onReady. De cette façon, il sera automatiquement
exécuté lorsque le DOM sera totalement chargé.
L'instruction var fp = new Ext.form.FormPanel (1) permet d'instancier un objet conteneur de type FormPanel.
Il servira à regrouper tous les champs de notre formulaire. Nous définissons sa largeur, sa hauteur, son titre,
son id et la propriété renderTo nous permet d'indiquer qu'il sera affiché dans le "body" de la page.
La propriété labelWidth nous permet de fixer la largeur des libellés des champs à 126 pixels.
La liste des champs du formulaires est définie dans le tableau d'objets items.
Les deux premiers "Nom" et "Prénom" sont des champs texte. La propriété defaultType ayant la valeur
textField (indiquant que le type de champ par défaut du formulaire est text), il n'est pas nécessaire de donner
plus de précisions.
Pour le champ "Nom", les propriétés suivantes sont ajoutées :
– allowBlank : false : indique que le champ ne peut être vide,
– blankText : 'Ce champ est obligatoire.' : détermine le message à afficher si le champ est laissé vide.
Ces deux propriétés servent à la validation automatique du formulaire.
Le dernier champ, "Age" a lui aussi quelques propriétés supplémentaires :
– xtype : 'numberfield' : indique qu'il s'agit d'un champ numérique. La propriété xtype permet de
simplifier la création de formulaires avec des champs ayant un type particulier (numérique, date,
email...). Un certain nombre de comportements sont pris en compte automatiquement par ExtJS, ce
qui fait d'autant moins de code à écrire.
– minValue : 1 : indique que le champ n'accepte pas de valeur inférieure à 1.
– maxValue : 99 : indique que le champ n'accepte pas de valeur supérieure à 99.
Ces propriétés servent également à la validation automatique du formulaire.
Un bouton "Envoyer" est ajouté à la fin du formulaire. On définit son libellé (text), son id (id) et on lui associe
un gestionnaire d'événements (handler), en l'occurrence btnEnvoyerHandler.
C'est ce gestionnaire qui sera appelé automatiquement lorsque l'utilisateur cliquera sur le bouton.
De nombreuses autres propriétés sont disponibles pour personnaliser la configuration du conteneur, du
formulaire et de ses champs. Il est impossible de toutes les détailler ici. Je vous recommande de consulter la
documentation en ligne très bien faite.
Voyons maintenant à quoi ressemble notre formulaire, sympathique non ?
Nous n'avons presque pas écrit de fonctions mais principalement décrit les propriétés du formulaire. Et
pourtant, nous avons un rendu plutôt sympathique, une validation simple, et la possibilité d'envoyer le
contenu du formulaire au serveur en Ajax. C'est là une des grandes forces du framework !
Nous avons une validation basique pour notre formulaire : nous avons défini que le champ "Nom" était
obligatoire (allowBlank : false) et que le champ "Age" devait être un nombre compris entre 1 et 99 (xtype :
'numberfield', minValue : 1, maxValue : 99).
11 / 14
Si le champ "Nom" n'est pas renseigné, on obtient le résultat suivant :
Le champ invalide est indiqué en rouge et une information est affichée au survol de la souris (son
emplacement et son apparence sont personnalisables).
Si vous essayez de saisir autre chose qu'un nombre entre 1 et 99 dans le champ "Age", la saisie n'est pas
prise en compte. Comme il s'agit d'un champ de type "numberfield", sans plus de code, nous avons
automatiquement des flèches permettant d'incrémenter ou de décrémenter sa valeur.
Voyons maintenant comment envoyer les données du formulaire au serveur...
Dans la description du bouton, nous avons défini une propriété handler. Il s'agit du nom du gestionnaire
d'événements que nous souhaitons associer au bouton "Envoyer".
Ce gestionnaire d'événements btnEnvoyerHandler est défini en (2).
L'instruction Ext.getCmp('nom').validate() permet de valider le champ "Nom" à partir des propriétés que nous
avons définies. Si le contenu du champ ne remplit pas les conditions définies dans la configuration, la
méthode renvoie false.
var formPanel = Ext.getCmp('formulaire'); nous permet de récupérer une référence à notre formulaire.
formPanel.el.mask('Traitement des données...', 'x-mask-loading'); affiche un masque sur le formulaire durant
le transfert des données et en attendant le traitement du résultat.
formPanel.getForm().submit({...}); déclenche l'envoi du formulaire en mode Ajax.
Les paramètres suivants sont définis :
url : 'traitement.php' indique l'url vers laquelle sont envoyées les données.
success : resultatTraitement indique le nom de la fonction à exécuter en cas de succès.
failure : resultatTraitement indique le nom de la fonction à exécuter en cas d'échec.
Nous voyons donc qu'un clic sur le bouton "Envoyer" déclenche la transmission des données vers la page
"traitement.php". Pour l'instant, elle n'existe pas, il nous faut donc la créer.
Tout ce que nous voulons pour l'instant, c'est vérifier la façon dont les échanges entre le client et le serveur
se passent. Le fichier "traitement.php" ne contiendra donc que très peu de choses.
<?php
// Chaîne au format JSON renvoyée par le script qui sera traitée par la fonction Javascript
"resultatTraitement"
echo "{success: true, msg : 'Les informations ont été traitées.'}";
Nous renvoyons ici une réponse au format JSON.
12 / 14
La réponse contient deux informations :
– success : indique si le traitement a fonctionné (conditionne la partie du code exécutée à la réception
de la réponse côté navigateur),
– msg : message que l'on affichera à l'utilisateur.
Ceci n'est bien entendu qu'un exemple très simple. Le script PHP pourrait très bien interroger une base de
données, effectuer des calculs... et renvoyer une réponse au format JSON (la fonction json_encode sera
alors bien utile...).
Nous avons vu comment valider les données, les envoyer à un traitement côté serveur, il nous faut
maintenant traiter la réponse.
C'est la fonction resultatTraitement qui va le faire. Nous lui avons associé ce rôle dans la déclaration
success : resultatTraitement.
L'instruction var result = action.result; nous permet de récupérer le résultat en provenance du fichier
"traitement.php".
On accèdera à tous les éléments de ce résultat par leur nom :
– result.success : va nous renvoyer true.
– result.msg : va nous renvoyer la chaîne de caractères "Les informations ont été traitées."
En fonction du résultat, nous allons afficher un message différent. Comme ici, result.success vaut true, nous
allons exécuter le code suivant : Ext.MessageBox.alert('Traitement termin&eacute;', result.msg);
Le résultat final est le suivant :
Conclusion
ExtJS est complètement orienté développement d'application web riches et peut-être moins adapté à la
création de sites web plus grand public. Mais utilisé dans le cadre pour lequel il est fait, il vous permettra de
créer et de déployer une application web riche rapidement et simplement. Avec un peu d'expérience, vos
scripts resteront simples, clairs et légers et vous gagnerez énormément en productivité.
Nous n'avons fait ici que survoler le framework, effleurer ses possibilités. Vous savez l'installer, utiliser
quelques fonctionnalités de base, afficher une boîte de dialogue, créer une fenêtre, un formulaire, envoyer
les données et récupérer les résultats en utilisant Ajax.
Dans un prochain tutoriel, nous irons un peu plus loin en regardant comment développer une petite
application web simple permettant de consulter et de manipuler des informations en provenance d'une base
de données et en utilisant des fonctions avancées pour construire l'interface.
Vous retrouverez les codes sources présentés dans ce document à l'adresse suivante :
http://gfevrier.kelio.org/tutoriels/tutoriel_1/
13 / 14
L'auteur...
Diplômé de l'Université de Technologie de Compiègne (UTC, promotion 1997), je travaille comme Ingénieur
de Développement pour la société Bull depuis 1998. J'ai été amené à travailler sur différents projets (allant
d'un seul développeur à une équipe d'une quinzaine de personnes) un peu partout en France, beaucoup pour
des clients publics (Bibliothèque Nationale de France, Ministère de l'Intérieur, Direction Générale des Impôts,
Ministère de l'Éducation nationale...) et des sociétés ou des entités chargées de services publics (CNAMTS,
EDF...). La grande majorité des projets sur lesquels j'ai travaillé portaient sur des applications web apportant
des fonctionnalités liées au métier, et très peu des sites web plus « traditionnels ».
Je suis certifié Zend PHP 5.3, membre de l'AFUP, et je m'intéresse à tout ce qui touche à l'écosystème PHP,
et web de façon plus générale.
Contact
LinkedIn : http://www.linkedin.com/profile/view?id=18463439
Viadeo : http://fr.viadeo.com/fr/profile/gilles.fevrier
14 / 14