From Learn About the Ext JavaScript Library

Que vous soyez nouvel utilisateur de la librairie Ext ou simplement curieux de découvrir celle-ci vous êtes sur la bonne page. Ce tutoriel va vous faire découvrir les concepts de base de Ext et comment obtenir rapidement une page dynamique pleinement fonctionnelle. On supposera que le lecteur a une certaine expérience du Javascript et possède les bases du document model object HTML (DOM).

Contents 1 Télécharger Ext 2 Allons-y ! 3 Element: le coeur de Ext 4 Sélection des noeuds DOM 5 Répondre aux événements 6 Utiliser les Widgets 6.1 MessageBox 6.2 Grille 6.3 Et beaucoup plus... 7 Utiliser Ajax 7.1 PHP 7.2 ASP.Net 7.3 ColdFusion 8 Et ensuite ?

Télécharger Ext

Vous pouvez télécharger la version courante de Ext ici : http://extjs.com/download.

Il existe différentes versions téléchargables de Ext, mais vous préférerez sûrement débuter avec la version courante stable. Une fois que vous aurez récupéré et décompressé l'archive un bon point de départ pour commencer est d'explorer le contenu du dossier examples.

Allons-y !

Nous allons voir ici la plupart des tâches courantes généralement réalisées en Javascript et comment exéctuter celles-ci avec Ext. Si vous souhaitez expérimenter le code de ce tutoriel vous pouvez récupérer l'archive IntroToExt.zip qui nous servira de base pour construire notre code Ext. Cette archive contient trois fichiers : ExtStart.html, ExtStart.js et ExtStart.css. Placez ces 3 fichiers dans le même dossier que celui contenant la librairie Ext (si Ext est sous "C:\code\Ext\v1.0", créez par exemple un nouveau dossier "tutoriel" sous "v1.0" et placez-y les 3 fichiers). Double-cliquez à présent sur le fichier ExtStart.htm afin d'exécuter celui-ci dans votre navigateur favori. Vous devriez obtenir un message indiquant que tout est correctement configuré.

Vous êtes maintenant prêt pour ouvrir le fichier ExtStart.js dans votre EDI ou éditeur de texte favori afin de jeter un oeil sur celui-ci :

Ext.onReady(function() {
	alert("Congratulations!  You have Ext configured correctly!");
});

Ext.onReady est probablement la première méthode que vous utiliserez dans chacune de vos pages. Cette méthode est appelée automatiquement quand le DOM est entièrement chargé garantissant ainsi la disponibilité des elements de la page que vous pourriez utiliser dans vos scripts. Pour commencer notre tutoriel, supprimez la ligne alert() nous ajouterons par la suite du code réalisant quelque chose de réellement utile

Element: le coeur de Ext

Presque tout ce que vous faites avec Javascript implique de référencer les éléments spécifiques de votre page de sorte que vous puissiez les utiliser par la suite. En Javascript traditionnel, sélectionner un noeud DOM en fonction de son ID se fait de la façon suivante :

var myDiv = document.getElementById('myDiv');
	

Ceci fonctionne bien mais l'objet qui est retourné (un noeud DOM) offre peu de possibilité. Afin de pouvoir faire ce que vous souhaitez avec ce noeud il est souvent nécessaire d'écrire beaucoup de code sur mesure. Il est de plus de votre responsabilité de gérer les multiples façons dont les noeuds peuvent être interprétés par les différents navigateurs.

Voyons l'objet Ext.Element. Element est réellement au coeur de Ext, fournissant l'accès aux éléments de la page et permettant d'agir sur ceux-ci. Son API est fondamentale pour toute la librairie Ext et si vous deviez passer du temps pour apprendre une classe Ext, ce devrait-être la classe Element !

Le code Ext pour obtenir un élément par son ID resemble à ceci (la page ExtStart.htm contient une balise div avec un id "myDiv" ajoutez donc ce code à ExtStart.js):

Ext.onReady(function() {
	var myDiv = Ext.get('myDiv');
});

Nous avons maintenant un objet Element, mais qu'y a t'il de si intéressant dans tout celà ?

• Element englobe la plus part des méthodes et propriétés DOM dont vous pourriez avoir besoin, fournissant ainsi une interface DOM pratique, unifiée et commune à tous les navigateurs (vous pouvez toujours accéder directement au noeud DOM quand cela est nécessaire via Element.dom)
• La méthode Element.get() possède un cache interne, ainsi les multiples appels pour retrouver le même objet sont très rapides
• Les actions les plus courantes réalisées sur les noeuds DOM sont directement intégrées de façon indépendantes du navigateur (ajouter/supprimer une classe CSS, ajouter/supprimer un gestionnaire d'évènement, positionner l'élement, opérations sur les dimensions, animation, glisser/déposer, etc.)

 

Ceci signifie que vous pouvez faire toute sorte d'opérations avec un minimum de code. Voici quelques exemples (voyez la documentation de l'API Element pour la liste complète). Ajoutez le code suivant à ExtStart.js après la première ligne ou nous avons récupéré l'élément 'myDiv' :

myDiv.highlight();      // Le fond de l'élement va être surligné en jaune
myDiv.addClass('red');  // Ajoute une classe CSS (définie dans ExtStart.css)
myDiv.center();         // Centre l'élément
myDiv.setOpacity(.25);  // Rend l'élément partiellement transparent
	

Sélection des noeuds DOM

Il est souvent impraticable voire impossible de choisir des noeuds DOM par leur ID. Peut-être à cause du fait que l'ID n'est pas présent, que vous ne le connaissez tout simplement pas ou bien parcequ'il y a trop d'éléments à référencer. Parfois, vous pouvez vouloir choisir des noeuds basés sur quelque chose d'autre que l'identifiant, comme un attribut ou un nom de classe CSS. C'est pour toutes ces raisons que Ext possède un sélecteur DOM extrêmement puissant appelé DomQuery.

DomQuery peut être employé comme librairie autonome, mais le plus souvent en utilisant Ext, vous l'emploierez dans le contexte de la sélection d'élément de sorte que vous pourrez alors agir par l'intermédiaire de l'interface Element. L'objet Element utilisera de lui même DomQuery pour la sélection d'élements par l'intermédiaire de la méthode Element.select. Voici un exemple simple de la façon dont vous pouvez employer ceci : le fichier ExtStart.html contient plusieurs paragraphes (<p>), aucun deux n'ayant d'identifiants. Si vous voulez facilement sélectionner tout les paragraphes et effectuer une action sur ceux-ci, vous pouvez faire quelque chose comme ceci :

Ext.select('p').highlight();

Cet exemple démontre un aspect très pratique de Element.select - cette méthode retourne en effet un CompositeElement qui permet d'accéder à chaque élément de base par l'intermédiaire de l'interface Element. Ceci permet d'agir facilement sur chaque instance Element retournée par Element.select sans pour autant faire de boucle sur ceux-ci pour les modifier individuellement.

DomQuery supporte une large gamme d'options de sélection incluant la plupart des sélecteurs du DOM W3C CSS3, les bases de XPath, les attributs HTML et beaucoup plus. Voyez la documentation de l'API DomQuery pour plus de détails sur cette puissante librairie.

Répondre aux événements

Jusqu'ici, dans nos exemples, tout le code que nous avons écrit se trouvait directement à l'intérieur de la fonction onReady. Ceci signifie que le code était exécuté automatiquement après le chargement de la page. Ceci ne nous donne pas beaucoup de contrôle - la plupart du temps allez vouloir que votre code s'éxécute en réponse à des actions ou évènements spécifiques. Pour faire ceci, vous définissez des handler d'événement qui pourront répondre aux événements en utilisant les fonctions que vous aurez assignée.

Commençons avec un exemple simple. Ouvrez ExtStart.js et éditez le code afin d'obtenir quelque chose ressemblant à ceci :

Ext.onReady(function() {
	Ext.get('myButton').on('click', function(){
		alert('You clicked the button');
	});
});

Le code s'exécute toujours quand la page est chargée mais il y a une différence importante ici. La fonction contenant le code alert() est définie mais ne s'éxécute pas immédiatement - elle est assignée comme "handler" de l'événement clique du bouton. En français, ce code pourrait être lut comme : "Obtenir une référence de l'élément ayant l'ID 'myButton' et lui assigner une fonction à appeler chaque fois que quelqu'un clique dessus."

Sans surprise, Element.select permet de faire la même chose mais avec un groupe d'éléments. Par exemple, pour montrer notre message quand n'importe le quel des paragraphes de notre page est cliqué, nous pourrions faire ceci :

Ext.onReady(function() {
	Ext.select('p').on('click', function() {
		alert("You clicked a paragraph");
	});
});

Dans ces deux exemples, la fonction gérant l'événement est simplement déclarée en ligne sans lui donner de nom. Le terme pour ce type de fonction est "fonction anonyme" puisqu'on la déclare sans jamais la nommer. Vous pouvez également manipuler un évènement par une fonction nommée, ce qui est particulièrement utile si vous souhaitez réutiliser la fonction pour lui faire manipuler des événements multiples. Le code suivant, par exemple, est équivalent au précédent :

Ext.onReady(function() {
	var paragraphClicked = function() {
		alert("You clicked a paragraph");
	}
	Ext.select('p').on('click', paragraphClicked);
});

Jusqu'ici nous avons effectué une action générique quand notre événement arrive, mais comment connaître quel élément spécifique a généré l'événement afin d'effectuer une action dessus ? Il s'avère que ceci est assez facile - la méthode Element.on passe trois paramètres extrêmement utiles à la fonction gérant l'événement (nous allons seulement regarder le premier, mais vous devriez explorer la documentation pour en apprendre plus au sujet de la gestion des événements). Dans nos exemples précédents notre fonction de manipulation ignorait ces paramètres, mais avec un simple changement, nous pouvons lui ajouter un niveau de fonctionnalité. Le premier, et le plupart important, paramètre est l'événement qui s'est produit. C'est un objet d'événement Ext, qui fournit plus d'informations que l'événement standard des navigateurs. Par exemple, le noeud de la cible DOM de l'événement peut être recherché avec :

Ext.onReady(function() {
	var paragraphClicked = function(e) {
		Ext.get(e.target).highlight();
	}
	Ext.select('p').on('click', paragraphClicked);
});

Notez que la cible est un noeud DOM, c'est pouquoi nous recherchons d'abord l'élément correspondant avant d'effecter une action sur celui-ci. Dans le cas de notre example, nous surlignons le paragraphe qui a été cliqué.

Utiliser les Widgets

En plus des fonctionnalitées que nous venons de voir, Ext inclut également un des plus riches ensemble de widgets Javascript aujourd'hui disponible. Il y a beaucoup trop à dire pour le simple cadre de cette introduction mais jetons tout de même un coup d'oeil aux widgets les plus généralement utilisés et voyons à quel point ils sont faciles à mettre en oeuvre.

MessageBox

Plutôt que l'ennuyeuse boite de dialogue "Hello World", ajoutons un petit effet à notre code. Nous avons déjà le code écrit dans la section précédente qui surligne chaque paragraphe quand vous cliquez dessus. Modifions ce code pour également afficher le texte du paragraphe qui a été cliqué dans une boîte de dialogue. Dans la fonction paragraphClicked, remplacez la ligne :

Ext.get(e.target).highlight();

...avec le code :

var paragraph = Ext.get(e.target);
	paragraph.highlight();
 
	Ext.MessageBox.show({
		title: 'Paragraph Clicked',
		msg: paragraph.dom.innerHTML,
		width:400,
		buttons: Ext.MessageBox.OK,
		animEl: paragraph
	});

Il y a ici deux nouveaux concepts qu'il vaut la peine de détailler. Ŕ la première ligne, nous créons maintenant une variable locale nommée paragraph qui contiendra une référence sur l'élément représentant le noeud DOM qui a été cliqué (dans ce cas-ci nous savons que ce sera toujours un paragraphe puisque notre événement de clic est seulement associé aux étiquettes <p>). Pourquoi faisons-nous ceci ? Nous aurons besoin d'une référence sur l'élément pour le surligner et nous utiliserons également le même élément pour certains des paramètres de MessageBox. Généralement c'est une mauvaise habitude que d'appeler plusieurs fois la fonction servant à récupérer une même valeur ou référence sur un objet. Ainsi, en assignant notre référence à une variable locale et en ré-utilisant cette variable, nous sommes de bons codeurs orientés objet !

Maintenant, voyons l'apppel à MessageBox qui démontre l'autre intéressant nouveau concept. à première vue, ceci peut sembler n'être qu'une simple liste de paramètres passés à une méthode, mais si vous regardez de plus près, il y a une syntaxe très spécifique. Ce qui réellement passé à MessageBox.show() dans ce cas-ci est seulement un paramètre : un objet litéral qui contient un jeu de propriétés et de valeurs. En Javascript, un objet litéral est un objet dynamique et générique qui est créé chaque fois qu'on emploient les caractères { et } en entourant une liste de nom/valeur de propriétés, et le format pour ces propriétés est [nom de la propriété] : [valeur de la propriété]. Vous verrez que ce modèle est intensivement utilisé dans Ext, vous devriez donc bien l'apprendre !

Pourquoi employer un object litéral ? La raison principale est la flexibilité. De nouvelles propriétés peuvent être ajoutées ou enlevées de l'object litéral à tout moment, ou définies dans n'importe quel ordre, alors que la signature de méthode (le nombre et le type des paramètres prévus pour une méthode) ne doit jamais changer. Ceci est également beaucoup plus commode du point de vue du développeur pour les méthodes qui ont beaucoup de paramètres facultatifs (comme dans le cas de MessageBox.show). Par exemple, disons qu'une méthode fictive foo.action possède quatre paramètres facultatifs, mais que vous ne voulez utiliser que l'un d'entre eux. Dans ce cas-ci, votre code pourrait ressembler à ceci : foo.action (nul, nul, nul, 'bonjour'). Avec un object litéral à la place, le code ressemblerait à ceci : foo.action ({param4 : 'bonjour'}). Beaucoup plus facile à employer et surtout beaucoup plus lisible.

Grille

La grille est l'un des widget les plus populaires dans Ext et généralement le premier que les gens veulent voir. Voyons comment obtenir facilement une grille basique et fonctionnelle. Remplacez le code que vous avez dans ExtStart.js pour obtenir quelque chose comme ceci :

Ext.onReady(function() {
	var myData = [
		['Apple',29.89,0.24,0.81,'9/1 12:00am'],
		['Ext',83.81,0.28,0.34,'9/12 12:00am'],
		['Google',71.72,0.02,0.03,'10/1 12:00am'],
		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
	];
 
	var ds = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),
		reader: new Ext.data.ArrayReader({id: 0}, [
			{name: 'company'},
			{name: 'price', type: 'float'},
			{name: 'change', type: 'float'},
			{name: 'pctChange', type: 'float'},
			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
		])
	});
	ds.load();
 
	var colModel = new Ext.grid.ColumnModel([
		{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
		{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
		{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
		{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
		{header: "Last Updated", width: 120, sortable: true, 
			renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
                        dataIndex: 'lastChange'}
	]);
 
	var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
	grid.render();
	grid.getSelectionModel().selectFirstRow();
});

Tout ceci peut vous paraître beaucoup mais il n'y a en fait réellement que sept lignes de codes au total ! La première ligne de code crée un tableau de données à afficher dans la grille. Dans le cadre de projets réels, vous chargeriez probablement ces données depuis une source dynamique comme une base de données ou un service web. Après, nous créons et chargeons un data store, qui indiquera à la librairie Ext comment lire et formater les données. Ensuite, nous définissons notre modèle de colonne qui permet simplement d'établir les options de configuration pour chaque colonne de la grille. Pour finir, nous créons le widget de grille, lui passons le data store et le modèle de colonne, lançons le rendu et activons la première ligne. Facile, n'est-ce pas ? Si tous va bien, vous devriez finir avec quelque chose qui resemble a peu près à ceci :

Naturellement, il y a probablement quelques détails dans ce code que vous ne comprenez pas encore (comme ce qu'est un MemoryProxy ?). Le but de cet exemple est de montrer comment il est possible d'utiliser un composant d'interface utilisateur extrêmement riche et visuellement complexe avec très peu de lignes de code - nous vous laissons le soins de découvrir les détails par vous même. Il y a beaucoup de ressources pour vous aider sur l'utilisation des grilles, entre autre les démos interactives et la documentation de l'API.

Et beaucoup plus...

Nous n'avons vu ici que la partie visible de l'iceberg. Il y a plus d'une douzaine de widgets à choisir dans Ext, parmi lesquels les templates de positionnement automatiques, les onglets, les menus, les barres d'outils, les boites de dialogue, les arborescences et encore beaucoup plus. Voyez la section d'exemples de la documentation pour avoir un aperçu de tout qui est disponible.

Utiliser Ajax

Une fois que vous avez créé votre page et que vous savez comment interagir avec les éléments qui la composent via Javascript, vous allez probablement vouloir obtenir des données depuis un serveur distant, le plus généralement afin récupérer ou sauvegarder des données dans une base de données sur le serveur. Faire ceci de façon asynchrone par l'intermédiaire de Javascript sans recharger la page est connu sous le nom de Ajax, et Ext a un excellent support d'Ajax. Par exemple, il est commun de vouloir gérer une interaction utilisateur, signaler quelque chose au serveur de façon asynchrone, puis mettre à jour un élément de l'interface en réponse à l'action. Voici un exemple d'un formulaire HTML très simple contenant un champ de saisie, un bouton, et une div utilisée pour afficher un message (Note : vous pouvez ajouter ce code à ExtStart.html si vous souhaitez le tester, mais vous devrez également avoir accès à un server web afin de pouvoir exécuter le code serveur détaillé un peu après) :

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />

Ensuite, nous ajoutons le Javascript requis pour obtenir nos données et les poster à un processus serveur (remplacez le code existant dans ExtStart.js par le suivant) :

Ext.onReady(function(){
	Ext.get('okButton').on('click', function(){
		var msg = Ext.get("msg");
		msg.load({
			url: [server url], // <-- replace with your url
			params: "name=" + Ext.get('name').dom.value,
			text: "Updating..."
		});
		msg.show();
	});
});

Le modèle général doit commencer à vous être familier maintenant ! Le code précédent génère un objet Element pour l'entrée okButton et attache une fonction anonyme à celui-ci pour la gestion de l'évènement clic. Dans le handler de l'évènement clic, nous employons une classe spéciale de Ext appelée UpdateManager - cette classe envoie une demande Ajax, reçoit une réponse et met à jour un autre élément. L'UpdateManager peut être employé directement, ou comme nous le faisons ici, par l'intermédiaire de l'élément que nous voulons mettre à jour (la div 'msg' ici) en utilisant la méthode Element.load. Quand Element.load est utilisée, la réponse du serveur remplace automatiquement le code HTML (innerHTML) de l'élément. Pour faire ceci, on passe simplement l'URL du processus serveur qui traitera la demande, les paramètres de la requête (dans notre cas la valeur du champ 'name') et le texte à afficher dans l'innerHTML de l'élément durant le traitement de la requête. Il ne reste plus qu'à rendre visible la div msg (puisqu'elle est masquée par défaut au début) et c'est tout ! Naturellement, comme avec la plupart des choses dans Ext, il y a beaucoup plus d'options pour l'UpdateManager, comme différentes façon de traiter les demandes Ajax dans différentes situations, mais ceci montre à quel point il est facile d'obtenir un exemple basique et fonctionnel.

La dernière pièce du puzzle Ajax est le processus du serveur web qui va réellement manipuler la requêter et renvoyer une réponse à la page. Ce processus peut-être une page du serveur, un servlet, un handler HTTP, un service web, ou même un script Perl ou CGI - en fait tout ce qui peut résider sur un serveur web et traiter des requêtes HTTP. Malheureusement, en raison de cette variété il est difficile de donner un exemple standard qui couvrirait toutes les possibilités. Voici donc quelques exemples dans des langages communs pour vous donnez un élement de départ (ce code renvoit simplement ce qui est passé dans le champ 'name' en ajoutant 'From Server:' au début) :

PHP

<?php if(isset($_POST['name'])) {
		echo 'From Server: '.$_POST['name'];
	}
?>

ASP.Net

protected void Page_Load(object sender, EventArgs e)
{
	if (Request.Form["name"] != null)
	{
		Response.Write("From Server: " + Request.Form["name"]);
		Response.End();
	}
}

ColdFusion

<cfif StructKeyExists(form, "name")>
    <cfoutput>From Server: #form.name#</cfoutput>
</cfif>

Le vrai défi avec les traitements Ajax est de correctement gérer et formater les données côté serveur. Il existe plusieurs formats d'échange de données que l'on utilise communément (le plus souvent JSON ou XML). Il existe également beaucoup de librairies capables de faire de l'Ajax et qui fonctionnent très bien avec Ext, car Ext est un language indépendant du serveur. Tant que le résultat est envoyé à la page dans le format de données approprié, Ext ne s'inquiète pas de ce qui se produit sur le serveur !

Et ensuite ?

Vous avez maintenant un petit aperçu de ce qu'est la librairie Ext et de ce qu'elle peut vous offrir. Il existe de nombreuses ressources pour vous aider à franchir les prochaines étapes :

• Ext Programmer's API Documentation
• Ext User Forums