From Learn About the Ext JavaScript Library

Contents 1 Introduction 1.1 Scénario 1 - Débutant 1.2 Scénario 2 - Pro 2 Comment faire

Introduction

Scénario 1 - Débutant

Vous avez entendu parler d'Ext, avez vu les exemples en ligne, et avez même commencé à lire l'API. Vous êtes impatient de commencer à jouer avec Ext, mais vous n'avez pas de serveur de test sous la main pour le faire !

Scénario 2 - Pro

Vous creusez l'API et vous trouvez une méthode qui a l'air intéressante et que vous aimeriez essayer tout de suite mais ne souhaitez pas devoir créer une page HTML de test incluant toutes les ressources appropriées juste pour tester cette unique méthode.

Quelle qu'en soit la raison, voici une façon rapide et immédiate de jouer avec Ext, et qui ne nécessite pas de serveur de test. Pour ce faire vous allez avoir besoin que Firefox avec son extension Firebug soient installés, mais vraiment si vous ne les avez pas installés, faites-vous un cadeau et installez-les tout de suite !

Comment faire

• Ouvrez la Documentationde l'API Ext. Il y a de fortes chances pour que vous y soyez déjà allés.
• Pressez la touche F12 pour ouvrir la console Firebug (vous utilisez Firebug, n'est-ce pas?)
• Si votre console Firebug est une simple ligne qui ressemble à queque chose comme '>>>', alors cliquez sur la petite flèche rouge dirigée vers le haut située dans le coin en bas à droite pour ouvrir la version multi-ligne de la console.
• Tapez ceci en première ligne et pressez Ctrl-Entrée pour l'exécuter :

Ext.get(document.body).update('<div id="test"></div>');

Ce que fait la ligne ci-dessus est remplacer l'ensemble du corps DOM avec un seul div (avec l'id test). Le contenu du corps DOM (élément body de la page) a disparu mais la librairie Ext est toujours chargée et prête pour que vous puissiez jouer avec.

Maintenant imaginons que vous avez navigué jusqu'à la page Ext.Panel de l'API et que vous vouliez voir de vos propres yeux à quel point créer un nouvel objet Pannel est simple. Ajoutez le code suivant dans firebug :

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'Mon contenu HTML'
});

Pressez Ctrl-Entrée à nouveau et voilà, votre nouveau panneau est créé sur la page.

Ok, maintenant vous souhaitez voir ce qui se passe si on ajoute une nouvelle option, par exemple activer la propriété collapsible. Votre code est toujours présent dans Firebug, vous pouvez donc ajouter une ligne supplémentaire contenant la nouvelle option de configuration :

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'Mon contenu HTML',
	collapsible: true
});

Pressez Ctrl-Entrée et vous voyez immédiatement le bouton-bascule de réduction apparaître dans le coin droit du panneau.

Chaque fois que vous pressez Ctrl-Entrée la première ligne supprime tout ce que vous aviez ajouté au dom lors des exécutions précédentes, vous conservez donc un canevas de travail propre. Cette simple astuce est incroyablement pratique si vous aimez avoir un premier aperçut de ce que fait la pléthore d'options de configuration disponibles.

Vous pouvez ajouter autant de code HTML que nécessaire dans la chaîne de caractères passée à la méthode update() en première ligne, et écrire autant de code Javascript que vous souhaitez pour explorer l'API Ext.

Maintenant à vous de jouer avec l'API !

• Ext Programmer's API Documentation
• Ext User Forums