Avec Objis, spécialiste formation ExtJS, maîtrisez la manipulation de noeuds DOM avec ExtJS. Comprenez la méthode Ext.get et le type objet Ext.dom.Element. Comprenez la valeur ajoutée de Ext.get() sur document.getElementById() . Découvrez le type Ext.dom.Element. Ajoutez des noeuds DOM dynamiquement. Supprimez des noeuds simplement.
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre la mise en oeuvre de DOM avec ExtJS
Comprendre le type Ext.Element
Comprendre valeur ajoutée de Ext.get sur document.getElementById()
Mettre en oeuvre des effets spéciaux sur un élément
Programme
Nos petits déjeuners ExtJS
Introduction
Partie 1 : modifier dimensions d’un noeud
Partie 2 : création de noeuds enfants
Partie 3 : suppression de noeuds
Partie 4 : mise à jour partielle html suite à interaction
Durée
30min
Introduction
2 compétences sont vitales lors d’un développement coté client : la gestion des nœuds DOM ainsi que la gestion d’évènements.
A travers la méthode Ext.get, vous avez la possibilité de manipuler les nœuds de votre page, et ce sans vous soucier du navigateur sous-jacent. De plus vous pouvez agir sur le contenu ainsi que le style CSS du nœud. Enfin, vous pouvez réaliser des ‘effets spéciaux’ sur l’élément.
Partie 1 : modifier dimensions d’un noeud
Analysez le code suivant :
Notez la présence dans le ‘body’ d’un bloc identifié par le label (unique !) ‘div1’ et auquel est appliqué un style ‘monDiv’.
Voici le rendu.
Nous allons réaliser des manipulations sur le bloc ‘div1’
Créez un fichier DemoExtJS.js et ajoutez le code suivant :
EXPLICATION ligne ‘4’ : on utilise la méthode Ext.get, à qui nous passons la chaîne ‘div1’, et qui nous retourne une instance de Ext.Element , référencée par la variable monDiv1.
— > Analysez la documentation de Ext.Element
INFO valeur ajoutée N°1 : rendu visuel indépendant des navigateurs modernes : Internet Explorer, Firefox, Opera.
INFO valeur ajoutée N°2 : Ext.get = document.getElementById + des méthodes facilitant gestion Element.
Ajoutez une référence au fichier DemoExtJS.js dans la page index.html
Voici le rendu de la page :
En utilisant la documentation ExtJS, expliquez le résultat du code suivant :
En particulier, notez l’objet config dédié à l’animation de l’élément.
Correction
Partie 2 : création nœuds enfants
Analysez la différence entre le code suivant …
…et le code suivant :
qui a pour rendu ceci :
Notez qu’ExtJS a généré un ‘id’ pour le div imbriqué.
QUESTION : comment imposer un id ? par exemple id= »monElement ».
Expliquez.
Analysez le code suivant :
qui a pour rendu ceci :
Expliquez
Correction
Partie 3 : suppression de nœuds
Analysez le code suivant :
Quel est son effet ?
Correction
Partie 4 : mise à jour nœuds html suite à interaction
CORRECTION
Conclusion
Dans ce tutoriel, vous avez mis en œuvre DOM ExtJS