Formation Sencha, ExtJS 4

Vue d’ensemble de la formation

• A la découverte de l’architecture d’ExtJS
• Créer des conteneurs, layouts, viewports
• Intégrer ExtJS avec un autre Framework javascript (jQuery…)
• Récupérer et afficher des données serveur
• Créer des interfaces pratiques avec ExtJS
• Concevoir des appels en Ajax avec ExtJS
• Gérer les composants de données DataGrid
• Créer vos propres composants réutilisables pour ExtJS.
• Migrer vos applications Ext 3 vers Ext 4

La formation en détail

Introduction ExtJS

-        Installation

-        Documentation

-        Modèle de licence

-        Intégration yui, jquery, prototype.js,

-        adapter, resources,s.gif

-        ext-all.js, ext-debug.js

-        Application Hello ExtJS

-        Nouveautés ExtJS 4

-        Les outils : JSBuilder et ExtJS Designer

Architecture ExtJS

-        ExtJS Base & Core

-        Gestion DOM / Event

-        Composants UI

-        Services accès données

-        Accès distant (Remoting)

-        Utilitaires

-        Glisser déposer

Les différents types de conteneur

-        Notion de base

-        L’héritage

-        La Viewport

-        La Window

-        Les TabPanel

-        Les Xtypes

Les différents types de Layout

-        Notion de base des Layouts

-        Relation Conteneur et Layout

-        Le BorderLayout

-        Les Layouts horizontal ou vertical : Layout Hbox, Vbox

-        Le Layout fit

-        L’AbsoluteLayout

-        Le Layout accordéon

-        Les Layout pour les formulaires

Coté Serveur

-        Notion d’Ajax et l’objet XMLHTTPResquest

-        Extjs et l’Ajax

-        Le XML et le Json

-        Ext.Direct

-        La méthode Pull

La gestion du DOM avec ExtJS

-        getElementById

-        getElementsByTagName

-        Ext.get()

-        Ext.Element

-        el, getEl()

-        createChild(), remove()

La gestion des évènements avec ExtJS

-        Ext.util.Observable

-        el.on, el.un

-        addListener

-        removeListener

-        addEvents

-        fireEvents

-        scope

La GridPanel Ext JS

-        Notion de base

-        Mise en place d’une GridPanel

-        Etude des  fonctionnalités de base

-        Affichage des données serveur (Json, Xml)

-        Manipulation des GridPanel

-        Etudes des autres possibilités avancées des gridPanel (Pagination, EditorGridPanel)

Les Treeview ExtJS

-        Chargement des données dans un arbre

-        Le Drag and Drop

-        Manipulation des Treeviews

Les formulaires et Extjs

-        Les champs de formulaire

-        Validation standard et personnalisée

-        Gestion des évènements des champs de formulaire

-        Intégration d'Ajax et données serveur

De ExtJS3 vers ExtJs4

-        Nouveau système de classe

-        Environnement et espace de noms

Création composants ExtJS

-        Méthodologie

-        Composant personnalisés

-        Bonnes pratiques

-        Exemples

Les Widgets

DatePicker, Slider, ProgressBar

Exemples d’exercices pratiques :

• API
• Préparation de l'environnement de travail
  • Installation
  • Configuration
• Premiers pas en ExtJs
  • Une fenetre sur mesure
  • Paramétrer un objet
  • Le Viewport : Une application plein écran
• Extend ou comment créer son propre composant
• Des onglets avec le TabPanel
• Le TreePanel
  • Un menu TreePanel Simple
  • Un menu TreePanel recursif
• Le GridPanel
  • GridPanel simple
  • GridPanel Dynamique
  • GridPanel dynamique avec pagination
  • Créer son propre composant GridPaginator
  • Utiliser son propre composant GridPaginatorPerso
• Création de formulaires

 Logiciels utilisés

• ExtJS 3.3
• ExtJS 4
• Firebug
• WAMP