rss

ExtJS - la gestion des évènements : les bases

Mini sommaire :



-Préambule : les pré-requis


J'installe ExtJS (Sencha); Un serveur Web (au hasard : WampServer);

Je crée un fichier : une page html simple comportant les pré-requis ExtJS :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Essai ExtJS</title>
<!-- ** Javascript ** -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>
Coucou
<div id="test-div"> </div>
</body>
</html>


Les pré-requis sont satisfaits si j'arrive à voir Coucou lorsque je vais sur l'adresse locale de ma page (ie. http://localhost/test.html)

-Exemple n°1 : gestion d'un évènement très simple


Je déclare un bouton, et sur le clic du bouton, j'affiche une alerte :

<script type="text/javascript">
Ext.onReady(function(){
var buttonObject = new Ext.Button({
id: 'monBeauButton'
,text:'Cliquez moi'
,handler:function() {
alert(' you do it !');
}
,applyTo:'test-div'
});
});
</script>
<div id="test-div"/>

Dans cet exemple, l'attribut handler comporte une fonction (ou une référence vers une fonction) qui est invoquée lors de l'action sur le bouton.

-Exemple n°2 : gestion d'un évènement de composant


Chaque composant ExtJS est décrit dans la documentation en ligne. En dépliant le noeud "Ext" on retrouve bien "Button".
Sur chaque composants, la documentation décrit les évènements que génère ce dernier.
en se rendant sur le paragraphe "events" on constate donc qu'un bouton génère les évènements suivants : added, afterrender, beforedestroy, beforehide, ...

Dans l'exemple 2 nous allons déclencher un affichage sur réception de l'évènement "mouseover" et "mouseout". Les lignes de documentation relatives à ces évènements précisent les paramètres reçus lors du déclenchement de l'évènement. Ici dans les deux cas nous aurons 2 arguments : le bouton et un event (évènement levé par le navigateur avec notamment la position de la souris).


<script type="text/javascript">
Ext.onReady(function(){
var buttonObject = new Ext.Button({
id: 'monBeauButton'
,text:'Cliquez moi'
,handler:function() {
alert(' you do it !');
}
,applyTo:'test-div'
});
buttonObject.on('mouseover', function(btn, evt) {
btn.setText("Cliquez-moi :o)");
});
buttonObject.on('mouseout', function(btn, evt) {
btn.setText("Nooon ici ! :o(");
});
});
</script>
<div id="test-div"/>


-Exemple n°3 : création d'un évènement spécifique


Une fois le pas pris de coder en mode "évènementiel", de nombreux cas de figure ou applications viennent à l'esprit (si si), et se pose la question alors de gérer ses propres évènements fait maison.

Voici un petit exemple simple (on ne demande que çà) qui va créer un évènement maison "troisclics" lorsque l'utilisateur en sera à son troisième clic sur le bouton.

Dans un premier temps il faut déclarer l'évènement du composant : on utilise "addEvents"
Dans un second temps on déclenche l'évènement : on utilise "fireEvent"


<script type="text/javascript">
Ext.onReady(function(){
var buttonObject = new Ext.Button({
id: 'monBeauButton'
,nbclic: 0
,text:'Cliquez moi'
,handler:function() {
this.nbclic++;
if (this.nbclic == 3) {
this.fireEvent("troisclics", this);
}
}
,applyTo:'test-div'
});
buttonObject.on('mouseover', function(btn, evt) {
btn.setText("Cliquez-moi :o)");
});
buttonObject.on('mouseout', function(btn, evt) {
btn.setText("Nooon ici ! :o(");
});
buttonObject.addEvents("troisclics");
//
// (...)
//
buttonObject.on('troisclics', function(btn) {
alert(' you do it 3 times !');
});
});
</script>

Aucun commentaire:

Enregistrer un commentaire