Accueil > Développement Front-End

 > Ext JS

null

Développement Front-End

Ext JS

Objectif

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

Durée : 3 jours (21 heures)

Dates :
-30/01/23
-03/07/23
-18/10/23

S'inscrire
Télécharger le pdf
Pré-requisMoyens pédagogiquesParticipantsFinancement & organisation

Bon niveau Javascript.

Programme de la formation

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
Menu