Hello World avec ExtJS

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).

On parle d'adaptateur car ExtJS peut être utilisé en parallèle avec les bibliothèques Javascript suivantes :
  • JQuery
  • Prototype/Scriptaculous
  • YUI
Ces bibliothèques sont utilisées pour la manipulation du DOM, pour les effets visuels et pour la compatibilité entre les navigateurs. Il existe un adaptateur pour chaque bibliothèque qui permet à ExtJS d'accéder à leurs fonctionnalités au travers d'une API commune.
index.html
<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.js
Ext.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 :

Taxonomy upgrade extras:

Ajouter un commentaire