Tutoriel : Une page ExtsJs4 de base en mode dynamique

Une page ExtsJs4 de base en mode dynamique

  • Dans ce projet, ajoutez une page : index.html, Le doctype doit être HTML5 : <!DOCTYPE html>
  • Nous allons maintenant inclure la feuille de style ainsi que le fichier ext.js
  • Nous devons définir le repertoire de base oû se trouve Extjs : 
  • Ext.Loader.setConfig({
        paths:{
            'Ext':'./ext-4/src'
        }
    });
  • Enfin il faut inclure la classe qui s'occupe d'afficher les messages : Ext.require('Ext.MessageBox');
  • Afin de verifier que tout fonctionne, on affiche un message extjs :

 

Résultat :

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
        <script type="text/javascript" src="ext-4/ext.js"></script>

        <script type="text/javascript">

               Ext.Loader.setConfig({
                  paths:{
                      'Ext':'./ext-4/src'
                  }
              });

              Ext.require('Ext.window.MessageBox'); 

              Ext.onReady(function(){
                   Ext.MessageBox.alert('info','Extjs4 est pret');
              });

        </script>

    </head>
    <body> </body>
</html>

contact : julien@lyondev.fr