Accueil › Formation › Développement et intégration › Sencha, ExtJS 4

Sencha, ExtJS 4

Apprendre le Framework Sencha, ExtJS pour proposer des interfaces riches aux utilisateurs

Public :

Intégrateurs Web, Webmaster, Développeurs Web, architectes Web

Prérequis :

Notion en JavaScript et en Programmation Orientée Objet. Bonnes notions en développement Web (CSS, HTML, XHTML)

Objectif :

Connaître le cadre d’utilisation de ExtJS, et ses principales fonctionnalités Cerner les problématique d’architecture liées à l’utilisation de ExtJS Etre capable de mettre en place ExtJS dans une application Web

Durée :

3 jours

Descriptif

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