Hello World en ExtJS
Afin de réaliser l’administration d’un nouveau projet personnel, je me suis mis à ExtJS, un framework Javascript fourni par Sencha qui remplit parfaitement les besoins d’un back-office, en unifiant la charte graphique et en proposant un vaste choix de composants prêts à l’emploi, tels que les datagrids, les graphiques ou encore des composants de formulaires élaborés.
Néanmoins, la documentation sur ce framework est assez faible, surtout pour sa version 4 (celle qui nous intéresse dans cette série de tutoriaux). C’est pourquoi je vous propose de partager mon expérience dans le développement de telles applications.
Nous allons, comme le veut la tradition, commencer par la création d’un simple Hello World!.
On débute par le téléchargement de ExtJS 4. On la décompresse dans un dossier extjs à la racine de notre application.
Créons ensuite notre fichier principal, contenant notre application.
<html>
<head>
<title>Administration panel</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Comme on peut le constater, il n’y a pas de doctype. Cela n’est pas un oubli : en effet, afin d’être compatible avec un maximum de navigateurs (IE6 notamment), Sencha déconseille d’utiliser un DocType.
Il en va de même pour la balise body qui reste vide, ExtJS se chargeant seul de la remplir avec les composants que vous lui aurez indiqué.
Nous incluons ensuite la feuille de style ext-all.css qui contient les instructions CSS pour tout le framework. Puis, on récupère également le script ext-debug.js, qui joue en quelque sorte le rôle de boot loader d’ExtJS. Bien entendu, en production, on utilisera le fichier minifié ext.js pour des raisons de performances.
Enfin, le fichier app.js va contenir notre application à proprement parler. Le voici.
Ext.application({
name: 'MyApp',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Hello world!',
html : 'Hello world!'
}
]
});
}
});
Nous commençons par définir notre application ExtJS avec la fonction Ext.application qui prend un objet en paramètre. Celui-ci nous permet de la configurer.
- name : le nom de notre application, qui nous servira comme une sorte de namespace au cours de notre développement.
- appFolder : le dossier où se trouveront toutes les composantes (vues, modèles, contrôleurs, etc.) de notre application. Par défaut, app.
- launch : méthode qui sera exécutée au démarrage de notre application.
Puis, au lancement, nous instancions à l’aide de Ext.create une instance de Viewport, qui est en quelque sorte l’organisation générale des composantes de notre vue. On lui assigne un layout fit (nous y reviendrons plus tard : sachez juste que cela permet aux composants du viewport de prendre tout l’espace disponible) et lui attachons un élément de type (xtype) panel dont le titre (title) et le contenu HTML (html) seront Hello world!.
Si vous lancez votre application, vous devriez obtenir un aperçu tel que le suivant. Vous pouvez cliquer sur le l’image pour avoir l’application en direct.
Nous avons donc vu comment, en quelques lignes de Javascript, créer notre première application ExtJS, incluant ce design aux teintes bleutées qui lui est bien caractéristique. Nous avons également approché la philosophie ExtJS, consistant à choisir des briques de composants et à les assembler. La création du panel dans ce billet en est l’exemple typique.
Nous verrons dans un prochain billet l’utilisation d’une datagrid, qui est selon moi l’un des composants les plus époustouflants de ce framework.
Comments
Trackbacks
There are no trackbacks on this entry.
Hmmm…
en regardant la doc de ExtJS, je me demande si pour être un peu plus en règle avec extjs4 il vaudrait pas mieux faire un app.js du genre:
Ext.onReady(function(){ var test = Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Hello world title!', html : 'Hello world html!' } ] }); });Non?
@stadja : D’après ce que j’ai pu lire, ta méthode se rapproche de ExtJS 3, qui est pas mal différent au niveau de l’approche. Avec la version 4, on a notamment une belle couche MVC que l’on ne voit pas encore dans ce billet.
Il faut faire attention : énormément de documentation est disponible pour la version 3. Certes, ça marche dans les grandes lignes dans la version 4, mais tant qu’à faire, autant être le plus proche possible des normes ExtJS 4. ;)
PS : pour insérer du code, il te suffit de mettre un [ js ] … [ /js ] sans les espaces pour avoir un joli formatage.