extjsDémarrer avec extjs


Remarques

ExtJS est un framework JavaScript de Sencha pour la création d'applications Internet riches. Il possède l'une des plus grandes bibliothèques de composants d'interface modulaire pré-construits.

Depuis la version 5.0, Sencha a préconisé l'utilisation de l'architecture Model-View-ViewModel (MVVM) sur sa plate-forme. Il maintient également la prise en charge de l'architecture MVC (Model-View-Controller), qui était le style d'architecture principal pris en charge par la version 4.x.

En outre, Sencha s’est concentré sur l’équipement de ExtJS avec des capacités d’application Web réactives et centrées sur le mobile. Son ancien framework Sencha Touch a été intégré à ExtJS depuis la version 6.0 avec des efforts pour combiner les bases de clients et consolider les redondances dans le nouveau framework combiné.

Versions

Version Date de sortie
6.2 2016-06-14
- 6,0 2015-08-28
5.0 2014-06-02
4.0 2011-04-26
3.0 2009-07-06
2.0 2007-12-04
1.1 2007-04-15

Installation et configuration

L'utilisation typique d'ExtJS s'appuie sur la structure pour créer des applications enrichies d'une seule page (RIA). La manière la plus simple de commencer consiste à utiliser Sencha Cmd , un outil de génération d'interface de ligne de commande couvrant la plupart des problèmes généraux du cycle de vie d'un déploiement, principalement:

  • gestion des paquets et des dépendances
  • compilation / regroupement de code et minification
  • gérer des stratégies de construction pour différentes cibles et plates-formes

» Télécharger Sencha Cmd


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

  • Connectez-vous à Sencha Support pour la version de licences commerciales ( page produit )
  • demander une copie d'évaluation valable 30 jours
  • demander la version GPL v3 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 de prise en main officielle pour obtenir 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, prenez note de l'emplacement du répertoire où le SDK a été extrait car cela sera requis dans d'autres exemples.

Créer 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 aura 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 (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'EDI de votre choix. entrer la description de l'image ici

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

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

entrer la description de l'image ici

Étape 3: Ajouter 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 Default.aspx, je viens de faire référence à 3 fichiers:

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

Sencha a établi un partenariat avec 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 de Ext, mais nous pourrions utiliser les mêmes fichiers (ext-all.js & ext-all.css) à partir de notre répertoire de projet ou comme sauvegardes en cas d'indisponibilité du CDN.

En se référant à 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 une div avec l'id «whitespace» que nous utiliserons plus tard pour rendre l'interface utilisateur.

entrer la description de l'image ici

<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: Ajouter 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, en l'occurrence «app». Ce dossier contiendra tout notre code d’application divisé en plusieurs dossiers, c.-à-d. Modèle, vue, contrôleur, magasin, etc. Actuellement, il n’a que le fichier app.js.

entrer la description de l'image ici

É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'unique espace de noms. Launch est une fonction appelée automatiquement lorsque toute l'application est prête (toutes les classes sont chargées correctement).

Dans cet exemple, nous créons un Panel avec une configuration et le rendons sur l'espace réservé que nous avons fourni dans le fichier 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 en tant que page de démarrage, la fenêtre suivante apparaît dans le navigateur.

entrer la description de l'image ici

Créer une application Hello World - Via Sencha Cmd

Cet exemple montre comment créer une application de base dans ExtJS en utilisant Sencha Cmd pour amorcer le processus - cette méthode générera automatiquement du code et une structure de squelette pour le projet.

Ouvrez une fenêtre de console et remplacez le répertoire de travail par un espace approprié dans lequel travailler. Dans la même fenêtre et le même répertoire, exécutez la commande suivante pour générer une nouvelle application.

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 
 

Remarque: L'indicateur -sdk spécifie l'emplacement du répertoire extrait de l'archive d' -sdk .

Dans ExtJS 6+, Sencha a fusionné les frameworks ExtJS et Touch en une base de code unique, différenciée par les termes respectivement classique et moderne . Pour simplifier, si vous ne souhaitez pas cibler les périphériques mobiles, un indicateur supplémentaire peut être spécifié dans la commande pour réduire l'encombrement dans l'espace de travail.

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 
 

Sans aucune configuration supplémentaire, une application de démonstration entièrement fonctionnelle devrait maintenant résider dans le répertoire local. Changez maintenant le répertoire de travail dans le nouveau répertoire du projet HelloWorld et lancez:

> sencha app watch
 

Ce faisant, le projet est compilé à l'aide du profil de génération par défaut et un serveur HTTP simple est démarré, qui permet d'afficher l'application localement via un navigateur Web. Par défaut sur le port 1841 .