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

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

JPG - 24.7 ko

Petit-déjeuner ExtJS 6 vendredi 25 septembre - Paris

Découvrez les opportunités offertes par le framework ExtJS 6 pour le développement de vos applications Web et Mobile.

Depuis 2009, Objis accompagne (conseil + formation) les organisations possédant un Backoffice JAVA/PHP/.NET et désireuses de créer des interfaces utilisateurs Web et Mobile à forte valeur ajoutée. Nous avons développé un savoir-faire technique et pédagogique sur Sencha ExtJS , Sencha GXT et l’éditeur Sencha Architect.

INSCRIPTION Petit-déjeuner ExtJS 6

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 :

PNG - 79.8 ko
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.

PNG - 3.5 ko
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 :

PNG - 7.2 ko
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

PNG - 66.6 ko
tutoriel-extjs-6-dom-1

Voici le rendu de la page :

PNG - 4 ko
tutoriel-extjs-dom-extjs-3

- 

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

PNG - 10.4 ko
tutoriel-extjs-6-dom-2

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

Correction

Zip - 1 ko
Tutoriel_dom_v1

Partie 2 : création nœuds enfants

Analysez la différence entre le code suivant ...

PNG - 9.8 ko
tutoriel-extjs-dom-extjs-5

...et le code suivant :

PNG - 11.9 ko
tutoriel-extjs-dom-extjs-6

qui a pour rendu ceci :

PNG - 19.2 ko
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 :

PNG - 14.7 ko
tutoriel-extjs-dom-extjs-8

qui a pour rendu ceci :

PNG - 22.2 ko
tutoriel-extjs-dom-extjs-8bis

- Expliquez

Correction

Zip - 1.7 ko
Tutoriel_dom_v2

Partie 3 : suppression de nœuds

Analysez le code suivant :

PNG - 6.7 ko
tutoriel-extjs-manipulation-dom-suppression-noeud

Quel est son effet ?

Correction

Zip - 1007 octets
Tutoriel_dom_v3

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

PNG - 99.3 ko
tutoriel-extjs-4-dom-2

- 

PNG - 8.7 ko
tutoriel-extjs-4-dom-3

- 

PNG - 7 ko
tutoriel-extjs-4-dom-4

- 

PNG - 23 ko
tutoriel-extjs-4-dom-5

CORRECTION

Zip - 7.9 ko
Tutoriel_dom_v4

Conclusion

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