Tutoriel ExtJS N°3 : manipulations DOM

////Tutoriel ExtJS N°3 : manipulations DOM

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

ext_logo.gif

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 :

tutoriel-extjs-6-dom-0

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.

tutoriel-extjs-dom-extjs-1

Nous allons réaliser des manipulations sur le bloc ‘div1’

 Créez un fichier DemoExtJS.js et ajoutez le code suivant :

tutoriel-extjs-dom-extjs-2

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

tutoriel-extjs-6-dom-1

Voici le rendu de la page :

tutoriel-extjs-dom-extjs-3

 

En utilisant la documentation ExtJS, expliquez le résultat du code suivant :

tutoriel-extjs-6-dom-2

En particulier, notez l’objet config dédié à l’animation de l’élément.

Correction

Tutoriel_dom_v1

Partie 2 : création nœuds enfants

Analysez la différence entre le code suivant …

tutoriel-extjs-dom-extjs-5

…et le code suivant :

tutoriel-extjs-dom-extjs-6

qui a pour rendu ceci :

tutoriel-extjs-dom-extjs-7

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 :

tutoriel-extjs-dom-extjs-8

qui a pour rendu ceci :

tutoriel-extjs-dom-extjs-8bis

 Expliquez

Correction

Tutoriel_dom_v2

Partie 3 : suppression de nœuds

Analysez le code suivant :

tutoriel-extjs-manipulation-dom-suppression-noeud

Quel est son effet ?

Correction

Tutoriel_dom_v3

Partie 4 : mise à jour nœuds html suite à interaction

tutoriel-extjs-4-dom-2

 

tutoriel-extjs-4-dom-3

 

tutoriel-extjs-4-dom-4

 

tutoriel-extjs-4-dom-5

CORRECTION

Tutoriel_dom_v4

Conclusion

Dans ce tutoriel, vous avez mis en œuvre DOM ExtJS

2018-01-28T12:42:36+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java