Tutorial:Easy ExtJs Part -1 (French)

From Learn About the Ext JavaScript Library

Summary: ExtJs facile pour les nuls. Une introduction extêmement simple à l'utilisation d'Ext pour réaliser un effet simple sur une page.

Author: Owen Lees (Traduction: Damien Serve)

Published: April 18, 2008 (Traduction: 19/02/2009)

Ext Version: 2.0

Languages:

English

Chinese

French

Ce tutoriel concerne la version 2.0 d'Ext.
Démonstration complète chez EasyExt.

Ce tutoriel est-il pour moi?

Si vous êtes un développeur occasionnel alors non, cette page n'est pas faite pour vous, plusieurs concepts présentés ici étant trop basiques et la plupart n'étant pas utiles dans le cadre d'une application.

Toutefois, si:

Vous voulez démarrer avec ExtJs à un niveau très élémentaire ou ..
Avez très peu de connaissances en Javascript - mais voulez des résultats immédiats

Cela va probablement être idéal pour vous!

J'ai créé un site web contenant un nombre croissant de démonstrations et d'exemples de code, le lien se trouve ci-dessus.

Réalisons un texte glissant activé par un lien.

Cette fonctionnalité est très courante dans la plupart des sites web aujourd'hui et, bien que facile à réaliser, constitue un bon exemple démontrant à quel point il est simple de réaliser des effets basiques à l'aide d'Ext.

Ce tutoriel va simplement identifier un id d'un l'élément sur la page (dans ce cas une div avec un id 'slideme') et à l'aide d'une méthode native ExtJs, le faire glisser de haut en bas sous un autre div.

La page HTML.

Rien d'effrayant ici, une simple page avec quelques divs et quelques lignes de texte sont tout ce dont nous avons besoin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Texte glissant</title>
        <!-- Intégre les bibliothèques ExtJs et leur CSS -->
        <link rel="stylesheet" type="text/css" href="/ext-2.0.2/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext-2.0.2/adapter/ext/ext-base.js"> </script>
        <script type="text/javascript" src="/ext-2.0.2/ext-all.js"> </script>
	<!-- Début du code JS spécifque à la page -->
        <script type="text/javascript" src="slidingtext.js"> </script>
	<!-- Fin du code JS spécifique à la page -->
        <!-- Une petite touche de CSS spécifique -->
        <style type="text/css">
        <!--
        .click_div {
           background-color: #CC00CC;
           padding: 20px;
        }
        -->
    </style>
</head>
<body>
 
<h2>Essayez-le!</h2>
<ul>
	<li><a id="textup" href="javascript:;">Anurag</a></li>
        <li><a id="textdown" href="javascript:;">Srivastava</a></li>
        <li><a id="texttoggle" href="javascript:;">Fonctionne en XCS</a></li>
</ul>
<p>&nbsp;</p>
 
<!-- Mises en place de quelques DIVs pour jouer avec -->
<div class="click_div" id="div1">Je suis un div avec l'ID 1, et le contenu du dessous devrait glisser de haut en bas.</div>
 
<div id="slider">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare fringilla ante. Sed auctor. Donec gravida interdum tellus. Aliquam vehicula mauris dapibus arcu. Phasellus nibh velit, hendrerit a, adipiscing vitae, eleifend quis, libero. Fusce eleifend iaculis erat. Suspendisse rhoncus nisi in arcu. Ut non augue. Ut consequat vehicula elit. Mauris quam. Vivamus iaculis, magna varius ornare porta, nulla diam venenatis libero, vel mattis dui pede vel dui. Praesent dapibus mauris non neque. Suspendisse eget orci. Suspendisse at nisl. Nam mauris dolor, mollis ut, mollis at, semper quis, augue. Morbi ornare. In eu mi non libero porttitor pharetra. Nullam sagittis vulputate orci. In eget sem quis nibh dignissim dignissim. Mauris in pede</div>
 
<div class="click_div" id="div2">Je suis aussi un div avec l'ID 2, salut!</div>
 
<div id="noslide">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare fringilla ante. Sed auctor. Donec gravida interdum tellus. Aliquam vehicula mauris dapibus arcu. Phasellus nibh velit, hendrerit a, adipiscing vitae, eleifend quis, libero. Fusce eleifend iaculis erat. Suspendisse rhoncus nisi in arcu. Ut non augue. Ut consequat vehicula elit. Mauris quam. Vivamus iaculis, magna varius ornare porta, nulla diam venenatis libero, vel mattis dui pede vel dui. Praesent dapibus mauris non neque. Suspendisse eget orci. Suspendisse at nisl. Nam mauris dolor, mollis ut, mollis at, semper quis, augue. Morbi ornare. In eu mi non libero porttitor pharetra. Nullam sagittis vulputate orci. In eget sem quis nibh dignissim dignissim. Mauris in pede</div>
 
</body>
</html>

Commencer le script.

Tout d'abord, nous devons veiller à ce que le script ne cherche pas à accéder aux éléments du DOM avant qu'il soit complètement chargé(en dehors des images) et prêt. Afin de réaliser ceci, nous utilisons la méthode Ext.onReady()comme ceci.

//Assurez-vous que VOTRE chemin vers cette image est correct!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';
 
//Ceci s'exécute au chargement du DOM - vous pouvez alors accéder à tous les élements.
Ext.onReady(function() {
 
//Nous mettons tout notre code ici
});

Notez que nous avons inclus un chemin d'accès à un fichier img en haut du script, cela afin d'éviter de récupérer ce fichier directement à partir des serveurs ExtJs - ne pas le faire peut ralentir un peu les choses.

Maintenant ajouter notre gestionnaire d'événements

Pour cela tout ce dont nous avons besoin est de capture le click sur notre lien de la page HTML, cela peut être beaucoup de choses - mais je pense que le click de souris standard est de loin celui que nous intéresse!

Heureusement ExtJs vient à la rescousse et simplifie tout en 1 seul appel.

Ext.get('textup').on('click',function(e,t){
	//Simple glissement de l'élément
	slideText('up','slider');
	Ext.get(t.id).frame('cccccc',1);
});
 
Ext.get('textdown').on('click',function(e,t){
	//Simple glissement de l'élément
	slideText('down','slider');
	Ext.get(t.id).frame('cccccc',1);
});
 
Ext.get('texttoggle').on('click',function(e,t){
	//simple bascule de cet élément
	slideText('toggle','slider');
	Ext.get(t.id).frame('cccccc',1);
});

Cela pourrait se traduire en français par: "Lorsque l'on clique sur l'élément 'textup', appeler la fonction slideText avec le sparamètres 'up' et 'slider', puis faire clignoter 'textup' en utilisant une méthode ExtJS nommée 'frame'".

Vous remarquerez que 2 valeurs sont passées à la fonction anonyme depuis le gestionnaire d'évènement Ext.get().on, celles-ci sont très utiles et représentent l'évènement (event) et la cible (target) vous permettant de faire des choses comme l'interruption de l'évènement et le plus utile de savoir quel élément a été cliqué (t).

Le lien portant l'ID 'textdown' est similaire à la différence du paramètre passé à la mini-fonction qui est bien-sûr 'down'.

Pour finir nous avons le gestionnaire d'évènement 'texttoggle' qui passe également le paramètre 'toggle' à la fonction slideText - J'ai l'impression qu'un modèle se dessine ici :)

La fonction slideText.

Maintenant nous avons besoin d'une fonction simple qui englobe les méthodes ExtJs Fx slideIn, slideOut et toggle. En faisant cela, nous développons de façon efficace en réutilisant du code, et nous allons également mettre en place une certaine logique en testant la visibilité de l'élément.

Nous allons utiliser un switch pour tester les paramètres entrant, étant plus concis qu'une série de if et else.

//Fonction simple de glissement de haut en bas et de masquage en option..
var slideText = function(direction,element){
 
var slideMe = Ext.get(element);
 
switch(direction){
	//Détermine la direction du glissement
	case 'up' :
			//vérifions la visibilité.
			//Si l'élément n'est pas visible on ne fait rien.
 
			if (slideMe.isVisible()) {
				//l'élément est visible
				slideMe.slideOut('t', {
					easing: 'easeOut',
					duration: .5,
					remove: false,
					useDisplay: true
				});
			}
		break;
	case 'down' :
			//vérifions la visibilité.
			//Si l'élément est visible on ne fait rien.
 
			if (!slideMe.isVisible()) {
				//L'élément n'est pas visible
				slideMe.slideIn('t', {
					easing: 'easeOut',
					duration: .5
				});
			}		
		break;
	default :
		//L'action par défaut est simplement de basculer l'élément entre les 2 états.
		slideMe.toggle();
		break
 
} //fin du switch
 
} //Fin de la fonction

Nous laissons les méthodes d'ExtJs faire le travail, ce code ne fait que les englober pour fournir une bonne expérience utilisateur.

A propos des méthodes slideIn et slideOut.

Sans approfondir vraiement le sujet, citons l'emploi d'une option de configuration pour ajouter des paramètres à ces méthodes, c'est une façon trés rapide de configurer des composants ExtJs.

if (slideMe.isVisible()) {
 
    slideMe.slideOut('t', {
	easing: 'easeOut',
	duration: .5,
	remove: false,
	useDisplay: true
});
 
}

slideMe est un élément que nous souhaitons déplacer, nous l'avons passé en paramètre à la fonction lors de son appel. Nous testons sa visibilité (eg: l'avons-nous déjà fait glisser?) en utilisant la methode ExtJs isVisible(), si il est visible nous passons à la section suivante qui appel la fonction slideout(). Remarquez le paramètre 't' qui indique à la fonction slideOut d'appliquer l'effet au bord supérieur central de la page (glissement vertical vers le haut), nous aurions pu aussi facilement utiliser 'l' et le faire partir sur la gauche. C'est aussi simple que ça!

En utilisant la structure de configuration nous pouvons personnaliser le comportement de slideOut, ici nous avons choisi le paramètre easing:'easeOut' pour faire durer l'effet une demi-seconde, ne pas supprimer l'élément du DOM en fin d'effet et pour finir d'utiliser le mode d'affichage 'display' pour le cacher. Ce mode va déplacer les autres éléments de la page autour de notre cible pour qu'ils remplissent l'espace où il se trouvait, nous donnat une effet d'animation satisfaisant.

Récapitulons

Nous avons vu que ExtJs contient un vaste panel de fonctionnalités sympathiques avec lesquelles vous pouvez commencer à jouer et étendre vos connaissances vers des choses plus sophistiquées, ce que nous avons vu ici n'est pas compliqué, mais vous apportera une gratification immédiate et pourrait vous encourager à expérimenter un peu et commencer à utiliser ExtJs comme un outil de votre boîte à outils de développement.

Le script complet.

//Assurez-vous que VOTRE chemin vers cette image est correct!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';
 
//Ceci s'exécute au chargement du DOM - vous pouvez alors accéder à tous les élements.
Ext.onReady(function() {
 
//Fonction simple de glissement de haut en bas et de masquage en option..
var slideText = function(direction,element){
 
var slideMe = Ext.get(element);
 
switch(direction){
	//Détermine la direction du glissement
	case 'up' :
			//vérifions la visibilité.
			//Si l'élément n'est pas visible on ne fait rien.
			if (slideMe.isVisible()) {
				//l'élément est visible
				slideMe.slideOut('t', {
					easing: 'easeOut',
					duration: .5,
					remove: false,
					useDisplay: true
				});
			}
		break;
	case 'down' :
			//vérifions la visibilité.
			//Si l'élément n'est pas visible on ne fait rien.
			if (!slideMe.isVisible()) {
				//L'élément n'est pas visible
				slideMe.slideIn('t', {
					easing: 'easeOut',
					duration: .5
				});
			}		
		break;
	default :
		//L'action par défaut est simplement de basculer l'élément entre les 2 états.
		slideMe.toggle();
		break
 
} //fin du switch
 
} //Fin de la fonction
 
Ext.get('textup').on('click',function(e,t){
	//Simple glissement de l'élément
	slideText('up','slider');
	Ext.get(t.id).frame('cccccc',1);
});
 
Ext.get('textdown').on('click',function(e,t){
	//Simple glissement de l'élément
	slideText('down','slider');
	Ext.get(t.id).frame('cccccc',1);
});
 
Ext.get('texttoggle').on('click',function(e,t){
	//Simple bascule de l'élément
	slideText('toggle','slider');
	Ext.get(t.id).frame('cccccc',1);
});
});

Ressources additionnelles

Plusieures ressources sont disponibles pour vous aider:

Ext

Personal tools

Views

Tutorial:Easy ExtJs Part -1 (French)

From Learn About the Ext JavaScript Library

Ce tutoriel est-il pour moi?

Réalisons un texte glissant activé par un lien.

La page HTML.

Commencer le script.

Maintenant ajouter notre gestionnaire d'événements

La fonction slideText.

A propos des méthodes slideIn et slideOut.

Récapitulons

Le script complet.

Ressources additionnelles

Learn Ext JS

Learn Ext GWT

Wiki Utilities

Toolbox

Ext JS

Ext GWT

Ext Core

JSBuilder

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help