Formation Ext JS - Développement d'applications Web avec TechnoWide

Objectifs pédagogiques

Maîtriser le mode de programmation Ext
Comprendre comment mettre en oeuvre des composants avancés
Voir plus Voir moins

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 / gestionnaires
• 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
Voir plus Voir moins