Informatique

Maîtriser le mode de programmation Ext
Comprendre comment mettre en œuvre des composants avancés

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 / gestionnaire
• 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