Informatique

Ext JS

Ext JS

Réf 4-JS-EXT
Durée 3 jours

Objectifs

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

Infos

Sessions à venir

19 oct-21 oct 2022

Certifications :

Nous consulter

Programme

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

En savoir +

Prérequis

Bon niveau Javascript.

Moyens pédagogiques

Réflexion de groupe et apports théoriques du formateur
Travail d'échange avec les participants sous forme de réunion-discussion
Utilisation de cas concrets issus de l'expérience professionnelle
Validation des acquis par des questionnaires, des tests d'évaluation, des mises en situation et des jeux pédagogiques.
Alternance entre apports théoriques et exercices pratiques (en moyenne 30 à 50%)
Remise d'un support de cours.

Possibilité de certification

Nous consulter.