Tutoriel : Générer le fichier JS de votre projet dynamique

Générer le fichier JS de votre projet dynamique

Lorsque vous travaillez en mode dynamique, les classes nécessaires à l'exécution de votre projet sont changées dynamiquement grâce a la méthode Ext.require. Cette technique dynamique ralentie considérablement la rapidité de votre programme.

 

C'est pourquoi, lorsque vous passez en production, il est judicieux de générer un fichier javascript contenant l'ensemble des classes qui compose votre projet.

 

Pour ce faire, il faut télécharger le Sencha SDK Tools : http://www.sencha.com/products/sdk-tools/.

 

  • Une fois installé, ouvrez une fenêtre de commande ms DOS :
    • Menu démarrer -> Executer -> cmd    puis cliquez sur ok.
  • Il faut se rendre maintenant dans votre répertoire de travail (on suppose ici : c:wampwwwtutoExtJs4)
    • tapez : cd c:\wamp\www\tutoExtJs4   puis appuyez sur entrée
  • Maintenant nous allons créer le fichier .jsb3
    • tapez : sencha create jsb -a http://127.0.0.1/tutoExtJs4/index.html -p tuto.jsb3  puis appyer sur entrée
  • Enfin les deux fichiers : all_classes.js et app-all.js
    • tapez : sencha build -p tuto.jsb3 -d . puis appyer sur entrée (n'oubliez pas le point à la fin de la ligne  

Voila. Vous avez désormais deux nouveaux fichier :

 

  • all_classes.js : Il contient toutes les classes nécessaire mais en mode debug
  • app-all.js : Il contient toutes les classes nécessaire en mode compressé, pret pour la production.

Retournez dans votre fichier index.html et ajouter ce dernier fichier à votre programme.

 

Pour être sure que cela à bien fonctionné, regardez dans l'onglet réseau de fireBug. désormais il n'y plus de script dynamique. La rapidité de votre programme est optimale.

 

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" src="app-all.js"></script>

        <script type="text/javascript">

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

              Ext.require('Ext.MessageBox'); 

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

        </script>

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

contact : julien@lyondev.fr