Développement Front-End
Ext JS
Objectif
Maîtriser le mode de programmation Ext
Comprendre comment mettre en œuvre des composants avancés
Bon niveau Javascript.
Moyens pédagogiques
Réflexion de groupe et apports théoriques du formateur
Travail d'échange avec les participants sous forme de réunion-discussion
Utilisation de cas concrets issus de l'expérience professionnelle
Validation des acquis par des questionnaires, des tests d'évaluation, des mises en situation et des jeux pédagogiques.
Alternance entre apports théoriques et exercices pratiques (en moyenne 30 à 50%)
Remise d'un support de cours.
Moyens techniques
Modalités d'évaluation
Feuille de présence signée en demi-journée,
Evaluation des acquis tout au long de la formation,
Questionnaire de satisfaction,
Attestation de stage à chaque apprenant,
Positionnement préalable oral ou écrit,
Evaluation formative tout au long de la formation,
Evaluation sommative faite par le formateur ou à l'aide des certifications disponibles
Modalités distance
A l’aide d’un logiciel (Teams, Zoom…), d’un micro et éventuellement d’une caméra les apprenants interagissent et communiquent entre eux et avec le formateur.
Sessions organisées en inter comme en intra entreprise.
L’accès à l’environnement d’apprentissage ainsi qu’aux preuves de suivi et d’assiduité (émargement, évaluation) est assuré.
Pour toute question avant et pendant le parcours, assistance technique à disposition au 04 67 13 45 45.
Profil formateur
Nos formateur sont des experts dans leurs domaines d'intervention
Leur expérience de terrain et leurs qualités pédagogiques constituent un gage de qualité.
Accessibilité
Les personnes en situation d'handicap sont invitées à nous contacter directement, afin d'étudier ensemble les possibilités de suivre la formation.
Pour tout renseignement, notre référent handicap reste à votre disposition : mteyssedou@ait.fr
Chefs de projets, Développeurs.
Compte personnel de formation
La formation n'est pas compatible avec le Compte personnel de formation
Sessions inter-entreprises
La formation est compatible avec l’organisation en session inter-entreprises
Programme de la formation
Introduction
- ExtJS 6 : Web & Mobile
- La mise en oeuvre Objet Config
- L'architecture application ExtJS 6
- Les modes: Modern & Classic
- Les répertoires
- Les fichiers modern.json, classic.json
- L'architecture MVVM
La méthodologie création écrans dans ExtJS
- Choisir son conteneur
- Choisir son Layout
- Choisir son composant
- L'insertion des composants (items)
- Création d’un gestionnaire d’évènement
- L'association composant / gestionnaire
- L'analyse classes Container, Component
Le modèle de classe ExtJS
- L'instanciation
- Ext.define, Ext.require
- La gestion dépendances
- Mixins, Config
- La création getters/setters
- Les méthodes Statics
L'accès aux données ExtJS
- Définir Model / Proxy / Store
- Model : associations, validation
- Proxy : client , server, reader, writer
- Store : filtre, tri, grouping
- La clé ‘api’de store
- Les opérations CRUD
- HTML5 : webStorage, SessionStorage
Le composant GridPanel ExtJS
- La clé ‘store’et ‘columns’
- La notion de ‘features’: SummaryFeatures
- La notion de ‘plugins’: RowEditorPlugin
- La gestion évènements
- Infinite Grid
La manipulation DOM façon ExtJS
- DOM bas niveau : document.getElementById
- DOM ExtJS : Ext.get, Ext.fly
- Le type Ext.Element
- Les effets spéciaux
- L'habillage CSS dynamique
Le template ExtJS
- Présentation
- L'arbre DOM prédéfini
- La compilation template
- XTemplate
- La balise
- tpl if, tpl for
La gestion Evènement DOM façon ExtJS
- Les différences gestion évènements IE / Firefox
- L'unification ExtJS gestion évènements
- Ext.util.Observable
- addEvent, fireEvent
- el.on, el.un
Le conteneur ExtJS
- La classe Ext.container.Container
- Le modèle de conteneur ExtJS
- La différence entre composant et conteneur
- Parent/enfant
- Panel, TabPanel, Viewport, Window
- xType
Layout ExtJS
- La notion de Layout & valeur ajoutée
- La relation Conteneur / Layout
- Layout clé : BorderLayout
- Les attributs : region, fit, stretch
- Hbox, Vbox
La gestion des évènements ExtJS
- La classe Ext.dom.Element
- L'évènement sur un noeud DOM : méthodes on(), un()
- L'évènement sur un composant ExtJS : clé ‘listeners’
- La propagation d’un évènement : capture, bubble
- Scope
Les composants ExtJS
- Le modèle de composant ExtJS
- Ext.Component
- Lazy rendering
- ComponentMgr
- renderTo, applyTo
- Le cycle de vie
Les formulaires ExtJS
- La validation des champs
- Le remplissage Combo avec Ajax
- La soumission du formulaire
- handler, listeners
- Le chargement du formulaire
- FieldDefaults
- Anchor : 100%
- LabelWidth
- Frame intégration