Formation Sencha Ext-JS 6, développer des applications multiplateformes en JavaScript
- Programme
- Participants / Prérequis
- Intra / sur-mesure
Vous apprendrez dans ce cours à concevoir des applications Web interactives et multiplateformes avec la bibliothèque Ext JS 6. Vous appréhenderez notamment les nouvelles fonctionnalités de cette version au travers du data-binding, du routage d'URL et de la configuration avancée des aspects "responsive design".
Objectifs pédagogiques
- Installer Ext JS et son environnement
- Créer des applications MVVM multi-cibles (tablettes, Smartphone, desktop)
- Créer et mettre en œuvre des composants graphiques
- Gérer des données
- Elaborer des thèmes
Présentation du framework
- Environnement : éditeur, Sencha Cmd...
- Exécuter et déboguer une application.
- Architecture Ext-JS 6, pourquoi MVVM plutôt que MVC.
Travaux pratiques
Installation d'Ext-JS. Création d'un espace de travail. Déboguer une application Ext-JS.
Concepts fondamentaux
- Structure d'une application.
- Instanciation d'un objet : procédurale vs déclarative, Ext.create(), alias et new. La gestion du DOM.
- Définir une classe : Ext.define(), constructor et config.
- Hériter une classe : extend, overrides et mixins.
- Chargement dynamique des classes.
Travaux pratiques
Créer une application avec Sencha Cmd. Créer des composants personnalisés.
Composants de base
- Composants, Conteneurs et Evénements.
- Les objets «Panels», «Toolbar» et «Buttons».
- Les "Layouts". Les objets "Windows" (classic) et "NavigationView" (modern).
- Le nouvel objet « Menu » (modern).
Travaux pratiques
Agencer les composants de l'application. Créer des boutons et des
fenêtres.
Architecture d'une application
- Le modèle MVVM. Concepts du pattern V VC VM
- Les dépendances : requires, views, models et stores.
- Envoi d'événements. Modulariser les classes.
- Partage de ressource entre Classic et Modern.
Travaux pratiques
Utilisation d'un pattern MVVM et du databinding.
Gestion des données
- L'ensemble des données : Models, Proxies, Stores.
- Envoi et réception de données (HTTP, Ajax/JsonP).
- Appel direct vs Model et Store. L'objet "Forms".
Travaux pratiques
Créer, valider et associer les données.
Composants graphiques orientés données
- Templating et Vue. Les graphiques.
- Les grilles : Stores, Columns, Features...
- Les arbres : nœud racine/enfants, TreeStore...
- Les formulaires : soumission, champs, validation...
- Les « List »,« NestedList » et « Grid » en Modern.
Travaux pratiques
Utilisation de templates. Mise en place de grilles, d'arbres, de formulaires...
Concepts avancés
- Routages des URL de l'application.
- Responsive Design.
- Build de l'application avec Sencha Cmd.
- Internationalisation. Amélioration des performances.
- Theming avec Sass et Sencha Fashion.
- Outils optionnels : PivotGrid, Inspector, Test...
- Compatibilité mobile avec les applications universelles.
Travaux pratiques
Associer une URL à un écran. Rendre une application responsive. Mettre à jour le thème à l'exécution.









