Ajouter ExtJS à vos pages HTML est très simple. Il suffit d'inclure la feuille de style ext-all.css, l'adaptateur par défaut (ext-base.js) et le fichier principal de la bibliothèque (ext-all-debug.js).
Notre code Javascript viendra lui dans un fichier séparé (ici index.js).
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello World avec ExtJS</title> <link href="/lib/js/ext-2.2/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" > <script type="text/javascript" src="/lib/js/ext-2.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/lib/js/ext-2.2/ext-all-debug.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> </body> </html>
La méthode Ext.onReady permet d'exécuter une fonction au chargement de la page. Elle permet de gagner quelques millisecondes par rapport à l'événement onload car elle est lancée avant le chargement des images contenues dans la page.
index.jsExt.onReady(function() { var viewport = new Ext.Viewport({ items: { html: "Salut tout le monde !" } }); });
Ce code crée un objet Ext.Viewport qui représente la fenêtre du navigateur. Ce composant est un container, il dispose donc d'une propriété nommée items qui permet de définir ses sous-éléments. Ici, on en définit un seul (par défaut, ce sera un Ext.Panel) qui contient le texte "Salut tout le monde !".
Ci-dessous le résultat dans le navigateur :
Add new comment