Présentation formation Sencha ExtJS 6
ExtJS 6 permet de créer des applications Web & Mobile à partir du même produit. Découvrez les notions de mode ‘classic’ et de mode ‘modern’. Avec l’aide de notre expert, formez-vous par la pratique et maîtrisez la création de vos écrans métiers, l’accès aux données et l’architecture 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).
| Tarif (Euros HT) | Audience | Pratique | Financement | Contact | Inscription |
|---|---|---|---|---|---|
|
Inter : 1790 Intra : Nous contacter |
Développeurs JAVA | 70% |
Opportunités financement |
07 63 03 11 08 | Bulletin inscription |
Planning des cours
| Mois | Janv | Fév | Mars | Avril | Mai | Juin | Juillet | Aout | Sept | Oct | Nov | Déc |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Lieu |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
PARIS |
| Dates (3j) |
|
|
|
04-06 |
|
13-15 |
|
|
19-21 |
|
14-16 |
|
Logiciels utilisés (inclus dans clé USB 4GO offerte)
ExtJS 6.0
Sencha Cmd 6
Vous allez apprendre à :
Concevoir une application Web et Mobile avec ExtJS 6
Créer le squelette d’une application ExtJS 6 avec Sencha Cmd 6
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 le composants de données GridPanel
Programme détaillé
Introduction
ExtJS 6 : Web + Mobile !
Mise en oeuvre Objet Config
Architecture application ExtJS 6
Mode ‘Modern’ : application mobile (Sencha Touch)
Mode ‘Classic’ : application web (ExtJS)
Répertoires partagés : resources,packages,overrides,app
répertoires ‘modern’, ‘classic’
Fichiers modern.json, classic.json
Architecture MVC, MVVM
Méthodologie création écrans
Choix du conteneur : ViewPort, Windows, Panel, Body ?
Choix du Layout : Border, Fit, Hbox, Vbox ?
Insertion des composants (items)
Création gestionnaires d’évènement (Layout)
Association composant / gestionnaires
Analyse classes Container, Component
Modèle de classe ExtJS
Instanciation : Ext.create
Ext.define, Ext.require
Gestion dépendances
Mixins, 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
Cycle de vie
Formulaires ExtJS
Validation champs
Remplissage Combo avec Ajax
soumission formulaire
handler, listeners
chargement formulaire
fieldDefaults
anchor : 100%
labelWidth
frame
