[TUTORIEL][Ext JS] Update div ExtJS

Update div ExtJS

sommaire :

Installation, Téléchargement

Exemple : Update

Dans ce tutoriel nous allons voir la manière pour mettre a jour une div avec Ext JS.
En route pour l’aventure. !!

Installation, Téléchargement

Rendez-vous sur le site de extjs.com et télécharger la version « Ext JS x.x SDK »

Sur votre serveur apache (Wamp, EasyPhp), créer un nouveau répertoire comme ceci :
Arborescence ExtJS Update : www.waanser.com

Ou téléchargez le package de ouf sur le premier exemple.

Exemple : Update

La fonction Update nous permet de mettre a jour les données.
Nous créons une div, par la suite avec l’id unique nous pourrons modifier son contenu.
Voyez plutôt l’exemple :

<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<script src="ext/adapter/ext/ext-base.js"></script><br />
<script src="ext/ext-core-debug.js"></script><br />
<title>Waanser : Tuto changement Update d'une div</title></p>
<p><script><br />
function getMessage() {</p>
<p>var el = Ext.get('message');<br />
el.update('Tilkc : Voila c'est super genial enfin bref le contenu de la div a changer... .<br />');<br />
}<br />
</script><br />
</head></p>
<p><body></p>
<p><div id="message"><br />
Cet exemple, en temps de grise mondiale, est le minimum pour changer le contenu d'une div avec ExtJS.<br />
Vous constaterez les moyens techniques spectaculaires afin d'arriver a notre but : Changer le texte.<br />
</div><br />
<a href="#" onclick="getMessage();">Update de la div => GO</a></p>
<p></body><br />
</html><br />

Autre Exemple :

<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<script src="ext/adapter/ext/ext-base.js"></script><br />
<script src="ext/ext-core-debug.js"></script><br />
<title>Waanser : Tuto changement Update d'une div 2 plus sympa</title></p>
<p><script><br />
var clique = false;<br />
function getMessage() {</p>
<p>var el = Ext.get('message');</p>
<p>if (!clique) {<br />
el.update('Texte 1 : BLA BLA BLA BLA 1');<br />
clique = true;<br />
} else {<br />
el.update('Texte 2 : BLA BLA BLA 2');<br />
clique = false;<br />
}<br />
}<br />
</script><br />
</head></p>
<p><body></p>
<p><div id="message"><br />
Tilkc : Dans ce deuxieme exemple, a chaque clique sur le lien, le texte changera.<br />
</div><br />
<a href="#" onclick="getMessage();">Update de la div => GO</a></p>
<p></body><br />
</html><br />

Ou téléchargez le package du deuxième exemple