Présentation formation Sencha ExtJS 5
ExtJS 5 prolonge ExtJS 4 tout en apportant des nouveautés architecturale, en particulier le nouveau pattern MVVM, une variante de MVC. Avec l’aide de notre expert, formez-vous par la pratique et maîtrisez la création de vos écrans métiers, ainsi que l’accès aux données et les architecture MVC et MVVM
Découvrez en profondeur l’architecture d’ExtJS, les composants clés, la gestion événementielle , la manipulation DOM, les Templates, la création de formulaires évolués et les techniques d’accès aux données (Store, Model, Proxy).
| Dates (3j) | Tarif (Euros HT) | Audience | Pratique | Financement | Contact | Inscription |
|---|---|---|---|---|---|---|
|
14-16 oct (Paris) 2-4 dec (Paris) |
1790 | Développeurs Javascript | 70% |
Opportunités financement |
07 63 03 11 08 | Bulletin inscription |
Logiciels utilisés (inclus dans clé USB 4GO offerte)
ExtJS 5
Sencha Cmd 5
Vous allez apprendre à :
Concevoir une application ExtJS 6 avec MVC et MVVM
Créer le squelette d’une application ExtJS 6 avec Sencha Cmd 5
Maîtriser la couche d’accès aux données : Model / proxy /store
Manipuler plusieurs conteneurs : Viewport, Panel, Window
Manipuler plusieurs layouts : border, fit, hbox/vbox
Maîtriser la notion d’Objet config Extjs
Maîtriser la gestion DOM ExtJS (Ext.get)
Maîtriser la gestion d’évènements ExtJS (Ext.on)
Mettre en oeuvre Template et XTemplate ExtJS
Créer des appels Ajax avec transport données XML / JSON
Maîtriser les notions de conteneur, layout
Comprendre le xtype : valeur ajoutée, cas d’utilisation
Créer et valider des formulaires Ajax
Maîtriser le composants de données GridPanel
Programme détaillé
Introduction
Historique
Installation & Documentation
Architecture ExtJS : 6 modules clés
Internationalisation I18N
Nouveautés ExtJS 6
Architecture MVC et MVVM
Besoin : structurer l’application
Création squelette Application avec Sencha Cmd
Pattern MVC avec ExtJS : avantages et lacuines
Pattern MVVM : plus de productivité, moins de maintenance
clés : name, appFolder, launch
Controlleur : init, control,
Vue : initComponent
Définition et méthodes Model
Création application ExtJS MVC
Méthodologie création écrans
Choix du conteneur : ViewPort, Windows, Panel, Body ?
Choix du Layout : Border, Fit, Hbox, Vbox ?
Choix des composants
Insertion des composants (items)
Création gestionnaires d’évènement
Association composant / gestionnaires
Analyse classes Container, Component
Objet config
Comprendre la notation
Valeurs par défaut
Lisibilité
Ordre paramètres
Mise en oeuvre Objet Config
Modèle de classe ExtJS
Instanciation : Ext.create
Ext.define, Ext.require
Gestion dépendances
Mixins
clé config
création getters/setters
méthodes Statics
Accès aux données
Definir Model / Proxy / Store
Model : associations, validation
Proxy : client , server, reader, writer
store : filtre, tri, grouping
la clé ‘api’ de store
Opérations CRUD
HTML5 : webStorage, SessionStorage
Composant GridPanel ExtJS
clé ‘store’ et ‘columns’
notion de ‘features’ : SummaryFeatures
notion de ‘plugins’ : RowEditorPlugin
gestion évènements
Infinite Grid
Manipulation DOM façon ExtJS
DOM bas niveau : document.getElementById
DOM ExtJS : Ext.get, Ext.fly
Type Ext.Element
Effets spéciaux
Habillage CSS dynamique
Template ExtJS
Notion de template ExtJS
Arbre DOM prédéfini
Compilation template
notion de Template
XTemplate
balise
tpl if, tpl for
Gestion Evènement DOM façon ExtJS
Différences gestion évènements IE / Firefox
Unification ExtJS gestion évènements
Ext.util.Observable
addEvent, fireEvent
el.on, el.un
Conteneur ExtJS
Classe Ext.container.Container
Modèle de conteneur ExtJS
Différence entre composant et conteneur
Parent/enfant
Panel, TabPanel, Viewport, Window
xType
Layout ExtJS
Notion de Layout & valeur ajoutée
Relation Conteneur / Layout
Layout clé : BorderLayout
attributs : region, fit, stretch
Hbox, Vbox
Gestion Evènements ExtJS
Classe Ext.dom.Element
Evènement sur un noeud DOM : méthodes on(), un()
Evènement sur un composant ExtJS : clé ‘listeners’
propagation d’un évènement : capture, bubble
scope
Composants ExtJS
Modèle de composant ExtJS
Ext.Component
Lazy rendering
ComponentMgr
renderTo, applyTo
Cycle de vie
Formulaires ExtJS
Validation champs
Remplissage Combo avec Ajax
soumission formulaire
handler, listeners
chargement formulaire
fieldDefaults
anchor : 100%
labelWidth
frame
intégration
