Formation ExtJS 4
Présentation formation Sencha ExtJS 4
En complément de nos tutoriaux ExtJS en libre accès , initiez-vous efficacement au développement des interfaces ergonomiques et rapides basées sur le framework ExtJS 4. Maîtrisez en particulier les spécificités de la version 4 : l’accès aux données et l’approche architecture MVC, ainsi que les nouveautés liés au DataGrid
Découvrez en profondeur l’architecture d’ExtJS, les composants clés, la gestion évènementielle , la manipulation DOM, les Templates, la création de formulaires évolués et les techniques d’accès aux données avec GidPanel ExtJS.
| Dates (3j) | Tarif (Euros HT) | Audience | Pratique | Financement | Contact | Inscription |
|---|---|---|---|---|---|---|
|
13-15 mai (Par) 10-12 juin (Par) 8-10 juil (Par) 7-9 aout (Paris) 21-23 oct (Par) 11-13 nov (Paris) |
Inter : 1890 Intra : 4800 |
Développeurs Javascript | 70% |
Opportunités financement |
01 40 07 81 28 | Bulletin inscription |
Logiciels utilisés (inclus dans clé USB 4GO offerte)
ExtJS 4.2,
Sencha Cmd 3
Plugin Eclipse Spket,
Eclipse 3.7,
Notepad++,
Firebug,
Wamp 5
Vous allez apprendre à :
Concevoir une application ExtJS 4 avec MVC : Model / Vue / Controlleur
Créer le squelette d’une application ExtJS 4 avec Sencha Cmd
Maîtriser la couche d’accès aux données : Model / proxy /store
Manipuler plusieurs conteneurs : viewport, Panel, Window
Manipuler plusieurs layouts : border, fit, hbox/vbox
Maîtriser la notion d’Objet config Extjs
Maîtriser la gestion DOM ExtJS (Ext.get)
Maîtriser la gestion d’évènements ExtJS (Ext.on)
Mettre en oeuvre Template et XTemplate ExtJS
Créer des appels Ajax avec transport données XML / JSON
Maîtriser les notions de conteneur, layout
Comprendre le xtype : valeur ajoutée, cas d’utilisation
Créer et valider des formulaires Ajax
Maîtriser le composants de données GridPanel
Vous initier aux outils : Sencha Cmd, JsBuilder, Spket
Programme détaillé
Introduction
Plate forme Sencha : ExtJS + Sencha Touch
Installation & Documentation
Application ’Hello ExtJS 4’
Architecture ExtJS : 6 modules clés
Internationalisation I18N
Architecture MVC
Besoin : structurer l’application
Création squelette Application avec Sencha Cmd
Organisation répertoires & fichiers du projet
Design pattern MVC
clés : name, appFolder, launch
Controlleur : init, control,
Vue : initComponent
Définition et méthodes Model
ComponentQuery
Création application ExtJS 4 MVC
Méthodologie création écrans
Choix du conteneur : ViewPort, Windows, Panel, Body ?
Choix du Layout : Border, Fit, Hbox, Vbox ?
Choix des composants
Insertion des composants (items)
Création gestionnaires d’évènement
Association composant / gestionnaires
Analyse classes Container, Component
Objet config
Comprendre la notation
Valeurs par défaut
Lisibilité
Ordre paramètres
Mise en oeuvre Objet Config
Modèle de classe ExtJS 4
Instanciation : Ext.create
Ext.define, Ext.require
Gestion dépendances
Mixins
clé config
création getters/setters
méthodes Statics
Accès aux données
Definir Model / Proxy / Store
Model : associations, validation
Proxy : client , server, reader, writer
store : filtre, tri, grouping
la clé ’api’ de store
Opérations CRUD
HTML5 : webStorage, SessionStorage
Composant GridPanel ExtJS 4
clé ’store’ et ’columns’
notion de ’features’ : SummaryFeatures
notion de ’plugins’ : RowEditorPlugin
gestion évènements
Infinite Grid
Manipulation DOM façon ExtJS 4
DOM bas niveau : document.getElementById
DOM ExtJS : Ext.get, Ext.fly
Type Ext.Element
Effets spéciaux
Habillage CSS dynamique
Template ExtJS 4
Notion de template ExtJS
Arbre DOM prédéfini
Compilation template
notion de Template
XTemplate
balise tpl if, tpl for
Gestion Evènement DOM façon ExtJS 4
Différences gestion évènements IE / Firefox
Unification ExtJS gestion évènements
Ext.util.Observable
addEvent, fireEvent
el.on, el.un
Conteneur ExtJS 4
Classe Ext.container.Container
Modèle de conteneur ExtJS
Différence entre composant et conteneur
Parent/enfant
Panel, TabPanel, Viewport, Window
xType
Layout ExtJS 4
Notion de Layout & valeur ajoutée
Relation Conteneur / Layout
Layout clé : BorderLayout
attributs : region, fit, stretch
Hbox, Vbox
Gestion Evènements ExtJS 4
Classe Ext.dom.Element
Evènement sur un noeud DOM : méthodes on(), un()
Evènement sur un composant ExtJS : clé ’listeners’
propagation d’un évènement : capture, bubble
scope
Composants ExtJS 4
Modèle de composant ExtJS 4
Ext.Component
Lazy rendering
ComponentMgr
renderTo, applyTo
Cycle de vie
Formulaires ExtJS 4
Validation champs
Remplissage Combo avec Ajax
soumission formulaire
handler, listeners
chargement formulaire
fieldDefaults
anchor : 100%
labelWidth
frame
intégration
