Tutoriel ExtJS N°3 : comprendre l’objet ’config’ d’ExtJS
Comprenez un des atouts majeurs d’ExtJS par rapport à d’autres frameworks javascript : l’objet config. Basé sur une notation JSON, il vous permet de bénéficier de paramètres par défaut des composants visuels. Il contribue également à une meilleure lisibilité de votre code ExtJS.
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre 3 atouts de l’objet ’config’ pour la configuration (look + comportement) composants.
Mise en oeuvre avec ajout (look) d’une icone à un MessageBox
Mise en oeuvre avec ajout (comportement) gestion évènements à un MessageBox
Programme
Introduction objet ’config’
Partie 1 : création boite de dialogue
Partie 2 : ajout d’une icone à boîte de dialogue
Partie 3 : gestion évènementielle boîte de dialogue
Durée
30min
Introduction objet config
Avec ExtJS, la configuration des composants visuels se fait avec ce qu’on appelle l’objet config’ : un objet de configuration qui vous permet de manière flexible de paramétrer le look et le comportement de vos composants visuels.
Sans l’objet config
Analyser la technique suivante :
- tutoriel-extjs-objet-config-notation-ancien
Notez les inconvénients de cette notation :
— 1) Impose de connaitre l’ordre des arguments
— 2) Ne décrit pas ce que représente les arguments
— 3) N’offre aucune flexibilité pour gérer des arguments optionnels
Avec l’objet config
Analyser la technique suivante :
- tutoriel-extjs-objet-config-demo
Expliquez les avantages de cette technique.
Partie 1 : Application boite de message
Analysez le code javascript suivant :
- tutoriel-extjs-objet-config-0
son rendu est le suivant.
- tutoriel-extjs-objet-config-1
Expliquez.
Partie 2 : ajout d’une icone
Par défaut, une boîte de dialogue ne possède pas d’icône. Si nous souhaitonns ajouter une icône pour notre boîte MessageBox, nous allons utiliser (surcharger) l’attribut ’icon’ de l’objet config de notre MessageBox.
Etape 1
- tutoriel-extjs-objet-config-2
Etape 2
- tutoriel-extjs-objet-config-4
Expliquez.
Le rendu est le suivant :
- tutoriel-extjs-objet-config-3
Expliquez
Partie 3 : gestion évènements
Par défaut, il n’y a aucun gestionnaire d’évènement pour notre MessageBox. Si nous souhaitonns ajouter gestionnaire d’évènement pour notre boîte MessageBox, nous allons utiliser (surcharger) l’attribut ’fn’ de l’objet config de notre MessageBox.
Le framework nous permet via le paramètre de la fonction anonyme suivante , d’avoir accès au bouton que l’utilisateur a sélectionné.
Analysez le code suivant :
- tutoriel-extjs-objet-config-5
Expliquez le résultat :
- tutoriel-extjs-objet-config-6
Nous pouvons aller plus loin dans la gestion du choix utilisateur en définissant un comportement plus dynamique. Analysez le code suivant :
- tutoriel-extjs-objet-config-7
Ecran ’yes’
L’écran suivant permettrait éventuellement d’envoyer l’adresse des tutos Objis à un ami.
- tutoriel-extjs-objet-config-9
Expliquez
A VOUS DE JOUER : en utilisant la documentation de la classe MessageBox de extJS 3.3 , proposer une méthode pour traiter l’information entrée par l’utilisateur. Par exemple en affichant cette information dans une nouvelle MessageBox.
QUESTION : en utilisant la documentation de ExtJS 4 , préciser ou se trouve désormais la classe MessageBox . Quelle différence dans la documentation de cette classe ?
Ecran ’no’
- tutoriel-extjs-objet-config-10
Expliquez
Ecran ’cancel’
- tutoriel-extjs-objet-config-8
Expliquez.
Correction
- Tutoriel3_objetconfig_corrige
