Formation ExtJS 6

Présentation formation Sencha ExtJS 6

JPG - 10 ko

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