Premiers pas avec extjs

Création d’une application Hello World - Via Sencha Cmd

##Installation et configuration

L’utilisation typique d’ExtJS exploite le framework pour créer des applications riches d’une seule page (RIA). La façon la plus simple de commencer est d’utiliser [Sencha Cmd][sencha-cmd_promo], un outil de construction CLI couvrant la plupart des préoccupations générales dans un cycle de vie de déploiement, principalement :

  • gestion des packages et des dépendances
  • compilation de code / groupement et minification
  • gestion des stratégies de build pour différentes cibles et plateformes

" [Télécharger Sencha Cmd][sencha-cmd_download]


La deuxième étape est de télécharger le SDK, ExtJS est un produit commercial - pour obtenir une copie, l’un des :

  • connectez-vous à [Sencha Support][sencha-support] pour la version commerciale des licences ([product page][sencha-ext_product])
  • demander une [copie d’évaluation][sencha-ext_trial] qui sera valable 30 jours
  • demander la [version GPL v3][sencha-ext_gpl] disponible pour les projets open-source
    (notez que vous ne pourrez peut-être pas accéder à la dernière version avec cette option)

Après avoir téléchargé le SDK, assurez-vous que l’archive est extraite avant de continuer.


Remarque : Consultez la documentation officielle [Getting Started][sencha-doc_intro] pour un guide complet des projets ExtJS.

Après avoir installé Sencha Cmd, sa disponibilité peut être vérifiée en ouvrant une fenêtre de console et en exécutant :

> sencha help

Nous avons maintenant les outils nécessaires pour créer et déployer des applications ExtJS, notez l’emplacement du répertoire où le SDK a été extrait car cela sera requis dans d’autres exemples.

[sencha-cmd_promo] : https://www.sencha.com/products/sencha-cmd/ [sencha-cmd_download] : https://www.sencha.com/products/extjs/cmd-download/ [sencha-support] : https://support.sencha.com/ [sencha-ext_product] : https://www.sencha.com/products/extjs/#overview [sencha-ext_trial] : https://www.sencha.com/products/extjs/evaluate/ [sencha-ext_gpl] : https://www.sencha.com/legal/gpl/ [sencha-doc_intro] : http://docs.sencha.com/extjs/6.0.2-classic/guides/getting_started/getting_started.html

Création d’une application Hello World - manuellement

Commençons à utiliser ExtJS pour créer une application Web simple.

Nous allons créer une application web simple qui n’aura qu’une seule page physique (aspx/html). Au minimum, chaque application ExtJS contiendra un fichier HTML et un fichier JavaScript, généralement index.html et app.js.

Le fichier index.html ou votre page par défaut inclura les références au code CSS et JavaScript d’ExtJS, ainsi que votre fichier app.js contenant le code de votre application (essentiellement le point de départ de votre application Web).

Créons une application Web simple qui utilisera les composants de la bibliothèque ExtJS :

Étape 1 : Créer une application Web vide

Comme le montre la capture d’écran, j’ai créé une application Web vide. Pour simplifier, vous pouvez utiliser n’importe quel projet d’application Web dans l’éditeur ou l’IDE de votre choix. [![entrez la description de l’image ici][1]][1]

Étape 2 : Ajoutez une page Web par défaut

Si vous avez créé une application Web vide, nous devons inclure une page Web qui serait la page de démarrage de notre application.

[![entrez la description de l’image ici][2]][2]

Étape 3 : Ajoutez des références Ext Js à Default.aspx

Cette étape montre comment nous utilisons la bibliothèque extJS. Comme le montre la capture d’écran dans le Default.aspx, je viens de référencer 3 fichiers :

  • ext-all.js
  • ext-all.css
  • app.js

Sencha s’est associé à CacheFly, un réseau de contenu mondial, pour fournir un hébergement CDN gratuit pour le framework ExtJS. Dans cet exemple, j’ai utilisé la bibliothèque CDN d’Ext, mais nous pourrions utiliser les mêmes fichiers (ext-all.js et ext-all.css) à partir de notre répertoire de projet à la place ou comme sauvegardes au cas où le CDN n’était pas disponible.

En se référant au app.js, il serait chargé dans le navigateur et ce serait le point de départ de notre application.

En dehors de ces fichiers, nous avons un espace réservé où l’interface utilisateur sera rendue. Dans cet exemple, nous avons un div avec l’id “whitespace” que nous utiliserons plus tard pour rendre l’interface utilisateur.

[![entrez la description de l’image ici][3]][3]

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

Étape 4 : Ajoutez un dossier d’application et app.js dans votre projet Web

ExtJS nous fournit un moyen de gérer le code dans un modèle MVC. Comme le montre la capture d’écran, nous avons un dossier conteneur pour notre application ExtJS, dans ce cas ‘app’. Ce dossier contiendra tout notre code d’application divisé en différents dossiers, c’est-à-dire modèle, vue, contrôleur, magasin, etc. Actuellement, il ne contient que le fichier app.js.

[![entrez la description de l’image ici][4]][4]

Étape 5 : Écrivez votre code dans app.js

App.js est le point de départ de notre application ; pour cet exemple, je viens d’utiliser la configuration minimale requise pour lancer l’application.

Ext.application représente une application ExtJS qui fait plusieurs choses. Il crée une variable globale “SenchaApp” fournie dans la configuration du nom et toutes les classes d’application (modèles, vues, contrôleurs, magasins) résideront dans l’espace de noms unique. Launch est une fonction qui s’appelle automatiquement lorsque toute l’application est prête (toutes les classes sont correctement chargées).

Dans cet exemple, nous créons un panneau avec une certaine configuration et le rendons sur l’espace réservé que nous avons fourni dans le Default.aspx.

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

Capture d’écran de sortie

Lorsque vous exécutez cette application Web avec Default.aspx comme page de démarrage, la fenêtre suivante apparaît dans le navigateur.

[![entrez la description de l’image ici][5]][5]

[1] : https://i.stack.imgur.com/cJMlb.jpg [2] : https://i.stack.imgur.com/m6moG.jpg [3] : https://i.stack.imgur.com/qJ4vd.jpg [4] : https://i.stack.imgur.com/SY8gQ.jpg [5] : https://i.stack.imgur.com/pqZin.jpg