Formation ExtJS 6

Créer des applications Web et Mobile avec le framework Sencha ExtJS 6

  • Concevoir une application Web et Mobile avec ExtJS 6

  • Créer la structure d’une application ExtJS 6 avec Sencha Cmd 6

  • Maîtriser la couche d’accès aux données : Model / proxy /store

  • Manipuler les conteneurs et les layouts 

  • Maîtriser les composants de données GridPanel

Connaître JavaScript
Formation pour ExtJS 6 mais également disponible en ExtJS 5


Programme de la formation ExtJS 6

Introduction

ExtJS 6 : Web + Mobile

La mise en oeuvre Objet Config

L'architecture application ExtJS 6

Le mode ’Modern’ : application mobile (Sencha Touch)

Le mode ’Classic’ : application web (ExtJS)

Les répertoires partagés : resources,packages,overrides,app

Les répertoires ’modern’, ’classic’

Les fichiers modern.json, classic.json

L'architecture MVVM

La méthodologie création écrans dans ExtJS

Le choix du conteneur : ViewPort, Windows, Panel, Body ?

Le choix du Layout : Border, Fit, Hbox, Vbox ?

Le choix des composants

L'insertion des composants (items)

La création gestionnaires d’évènement

L'association composant / gestionnaires

L'analyse classes Container, Component

Le modèle de classe ExtJS

L'instanciation : Ext.create

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

La notion de template ExtJS

L'arbre DOM prédéfini

La compilation template

La notion de 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 champs

Le remplissage Combo avec Ajax

La soumission du formulaire

handler, listeners

Le chargement du formulaire

fieldDefaults

anchor : 100%

labelWidth

frame

intégration