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

Mots clés du blog

acceptancetest androï Android androïd Android7 api appender appengine application applications archive array assistantematernelle astuce auth0 authentication authority automation Axis bash bearer blog bower build bundle c calendrier camille combal cdi certificate cf client cloudfoundry collaboratif command commandes connexion console css démasquées démasquer développement dll dump easter eggs écologie écrit employeur EMUI EMUI5.0 enfant évènement export-package ExtJS fiche find firefox gadget gelf gem git gmail gooelappengine google gparted gps graylog grenoble Grid gui harddrive heroku hover howto HTML http https IE ihm immobilier imprimante innovation insolite instance integration Java JavaScript jenkins jeu jobs json json-schema-validator key keystore labs linux livre log log4j logger logs lombok masquées masquer maven maven-gae-plugin Mémoire microsoft mobile mockito mondialisation monitor MUSE musique en ligne myopera nodejs npm NT NTEventLogger onglet openstack osgi paas package parameters parent php politique prosyst prototype proxies proxy quartz radio rappel recherche regex repository resize RIA rock route ruby rubygems s8500 samsung scheduler scm sel selenium Serializer server shared shell slf4j smartphone so société song spy ssh ssl struct swagger swig tâches téléphone téléréalité test thunderbird timeout token Tomcat tooltip tooltips truststore ubuntu unit test validator virgin virtualbox wave waze web WebApp wiki wikimedia wikipédia wikipen windows yahoo youtube yum