Tutoriel : Premiers pas en ExtJs

Premiers pas en ExtJs

Une page HTML de base :

Nous allons creer une page html configurée pourfonctionner avec ExtJs.

ExtJs à besoin de 3 fichiers et 1 image:

  • ext-all.css (la feuille de style)
  • ext-base.js (l'adaptateur)
  • ext-all.js (les composants)
  • s.gif (un décalage blanc)

Vous pouvez ajouter un fichier de langue pour que ExtJs fonctionne en français : ext-lang-fr.js

 

Lorsque vous etes en cours de développement, les fichier ext-base.js et ext-all.js peuvent etre remplacés par ext-base-debug.js et

ext-all-debug-w-comments.js. Le code source de ces fichiers sont documentés.

Sous eclipse :

  • Clic droit sur le répertoire ext3 -> new -> HTML file
  • Dans la nouvelle fenetre, séléctionner votre dossier ext3
  • Spécifiez le nom : index.html
  • Cliquez sur suivant
  • Cochez le template : XHTML 1.0 transitional
  • Cliquez sur finish

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Insert title here</title>
   
    </head>
    <body>
   
    </body>
</html>

Dans votre nouvelle page index.html :

  • Insérez une nouvelle ligne avant </head> (ligne 7)
  • Copier en ligne 7 :

<link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>

 

  • Copiez à la suite le bloc suivant :

<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = 'http://127.0.0.1/ext3/ExtJs3/resources/images/default/s.gif';     
    Ext.onReady(function(){
        // mon code ExtJs...
    });   
</script>

 

Ext.onReady est une fonction qui ne s'exécutera qu'une fois la page entièrement chargée. Nous placerons notre code ExtJs à l'interieur de cette fonction.

Test :

Pour tester notre nouvel environnement, nous allons afficher un message ExtJs :

  • Dans la fonction Ext.onReady, à la place de //mon code ExtJs... copiez :

Ext.Msg.alert('Information','La page de base en ExtJs3 fonctionne !')

 

Sauvegarder votre travail : Menu du haut -> file->save (CTRL + S)

 

Pour tester : ouvrer firefox et entrez l'adresse : http://127.0.0.1/ext3/index.html

résultat :

Ext.Msg.alert

Page complete :

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Insert title here</title>
        <link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
        <script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'http://127.0.0.1/ext3/ExtJs3/resources/images/default/s.gif';     
            Ext.onReady(function(){
                Ext.Msg.alert('Information','La page de base en ExtJs3 fonctionne !')
            });   
        </script>
    </head>
    <body>
   
    </body>
</html>

contact : julien@lyondev.fr