Formation ExtJS 4

PDF 

Tweet

Follow

Viadeo

Objectifs de la formation ExtJS

La bibliothèque Javascript ExtJS est un outil puissant pour construire des applications Web interactives qui fournit un grand nombre de composants visuels.

Durant cette formation ExtJS (Ext JS), les participants découvriront le fonctionnement de Ext JS à travers un grand nombre d'exercices pratiques et la découverte des nombreux Widgets qui peuvent être intégrés simplement à une application Web.

Public concerné Développeurs Web. Pré-requis Connaitre le JavaScript ou avoir suivi la formation JavaScript.

Informations pratiques Référence : #EJ01 Durée : 3 jours (21 heures) Tarif inter-entreprises: 1 800€ (HT) Stage intra-entreprise disponible   Dates :  - du 13 au 15 Février  - du 10 au 12 Avril  - du 9 au 11 Juillet  - du 15 au 17 Octobre  - du 10 au 12 Décembre   Consultez-nous pour obtenir un devis et les prochaines disponibilités de nos consultants formateurs.

Présence nationale Cliquez sur l'image pour l'agrandir Auxerre, Bordeaux, Caen, Clermont-Ferrand, Dijon, Grenoble, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Perpignan, Reims, Rennes, Rouen, Strasbourg, Toulouse, Toulon, Tours

Programme de la formation Ext JS

Vue d'ensemble d'ExtJS

• Présentation du framework ExtJS
• Positionnement dans le monde des RIA (Silverlight, Flex, GWT, etc.)
• Exemples professionnels
• Communauté et documentation
• Modèle de licence
• Outils
• Intégration avec d'autres framework : prototype, yui, jquery
• Nouveautés d'ExtJS version 4.0 (MVC, graphiques, themes, etc.)
• Mise en place du framework
• JSBuilder et ExtJS Designer

Quelques rappels utiles

• Bonnes pratiques
• JavaScript : closure, prototype, json, etc.
• Gestion du DOM : compatibilités IE/Firefox, chainage, etc.
• Gestion des événements : observable, listener, events, scope, bubble, etc.

Architecture d'ExtJS

• ExtJS Base & Core
• Composants UI
• Services accès données
• Accès distant (Remoting)
• Utilitaires
• Glisser déposer

Approche des formulaires Ext JS

• Premiers pas : Ext.onReady, Objet Config, Ext.Msg, Ext.Get, Ext.fly
• Les champs de formulaire
• Validation standard et personnalisée
• Gestion des évènements des champs de formulaire
• Intégration d'Ajax et de XML

Conteneur ExtJS

• Notion de Conteneur
• Parent/enfant
• TabPanel
• Window
• Viewport
• XType

Les layout Ext JS

• La notion de Layout
• Conteneur vs. Layout
• Représentation visuelle
• Les Layouts ExtJS 3.0 et ExtJS 4.0
  • BorderLayout
  • Layout fit
  • AbsoluteLayout
  • Layout accordéon
  • Layout formulaire
  • Layout Hbox, Vbox
  • Layouts, regions et viewport
  • Tab panels et Accordions

Interface utilisateur ExtJS

• Modèle de composant et cycle de vie
• Ext.Component, XType, Lazy, ComponentMgr, renderTo, applyTo, ViewPort
• Boutons : split buttons, icon buttons, handlers
• Barre d'outils (toolbar): alignement, dividers, spacers
• Ext.getCmp, Ext.Element
• Panels
• Widgets
• Menus
• Toolbar
• Combobox
• Styles CSS
• Champ / zone texte
• CheckBox, Boutton radio

Accès aux données avec ExtJS

• Template, XTemplate
• Accès local et distant
• Comprendre le GridPanel
• Proxy, Reader, Record, DataStore
• ColumnModel, GridView,
• EditorGridPanel
• DataView, ListView, Treeview
• Charts, Reporting

Enrichir vos RIA grâce au GridPanel Ext JS

• Qu'est ce qu'une grille ?
• Affichage de données structurées dans une grille
• Formatage et mise en forme de cellule
• Fonctionnalités intégrées à Ext JS : tri côté client, colonnes visibles/cachés, ré-ordonner des colonnes
• Affichage de données serveur dans une grille
• source de données XML
• source de données JSON
• récupération des données dynamiques en PHP dans une base
• Manipulation de la grille
• Formatage avancé de la grille : pagination, groupement

Les grilles Ext JS

• Property grid, Editable grid, xml grid, Bufffered GridView, Grid Data Binding, etc.
• Edition simple d'une grille côté client
• Edition de plus de types de données : type date, édition avec une ComboBox
• Réagir aux changements modifications d'une cellule
• Suppression et ajout de lignes dans le data store
• Sauvegarde des modifications côté serveur
• Mise à jour
• Suppression de lignes
• Ajout de lignes
• Pagination
• Gestion click, doubleclick
• Menu contextuel
• Renderer

Treeview ExtJS

• TreeGrid, Check Tree, XML Tree Loader, Multiple trees, etc.
• Chargement de données dans un arbre
• Drag and drop
• Filtrage et édition

Création composants ExtJS

• Valeur ajoutée
• Exemples
• Méthodologie
• Industrialisation
• Composant personnalisés
• Bonnes pratiques

Communication avec le serveur

• Rappel Ajax (XMLHTTPRequest)
• Ajax façon ExtJS
• XML, JSON
• Ext.Direct
• Pull

Sencha et Google : Ext et GWT

• Qu'est ce que GWT
• Historique
• Le duo gagnant : ExtGWT
• Mise en œuvre
• Avantages et inconvénients
• Positionnement dans le monde des RIA

Logiciels utilisés

Tout logiciel où il n'y a aucun intérêt pédagogique à le faire faire par les stagiaires sera préinstallé sur les postes.

Travaux pratiques

Tout au long de cette formation, de nombreux exercices seront effectués. En effet, environ 60% du temps est concacré à la pratique.

Formations connexes disponibles dans notre centre de formation

Si vous souhaitez aller plus loin après la formation ExtJS, vous pouvez suivre les formations Ext JS avancée, Ajax et JQuery, ou Ext GWT.

Mots clés associés à cette formation

Développement web, javascript, RIA, Rich Internet Application, Ajax, ExtJs, Ext Js.

Financement de la formation professionnelle

Ce cours peut être financé par l'OPCA (Agefos, Fafiec, Opcalia...) de votre entreprise ou par le Fongecif de votre région.

Il peut également être suivi dans le cadre du DIF, du CIF, ou d'une période de professionnalisation.