Note: J'assume dans ce billet que vous savez comment configurer Ext JS dans une page Web. Si ce n'est pas le cas, le billet précédent explique les étapes nécessaires.

Au niveau des applications Internet Riches (RIA), les boîtes de dialogues occupent une place importante. Conscient de ce fait, les développeurs de Ext JS ont mis à notre disposition une grande variété de boîtes de dialogue couvrant ainsi la plupart des scénarios.

Les outils (fonctions et constantes) nécessaires pour créer des boîtes de dialogue se trouvent dans l'espace de nom (namespace) Ext.MessageBox ou son alias Ext.Msg.

Il est important de garder à l'esprit que le code dans cet espace de nom s'éxécute de manière asynchrone (contrairement à la fonction alert() de Javascript). Plus simplement, un appel à la fonction Ext.Msg.alert() n'empêche pas la poursuite de l'éxécution des lignes de code qui suivent l'appel. Ainsi donc, dans le cas où on a l'intention d'exécuter du code après que l'utilisateur ait interagi avec notre boîte de dialogue, il faudra utiliser une fonction callback.

Dans la suite de ce billet, nous allons montrer des exemples d'utilisation:

Boîte de dialogue simple

 
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.Msg.alert('Titre','Message') ;
	}) ;
</script>
 

 
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.Msg.alert('Titre','Message') ;
	}) ;
</script>
 

 
<script type="text/javascript">
Ext.onReady(function(){
	Ext.Msg.show({
		title:'Question',
		msg: 'Etes-vous un developpeur?',
		buttons: Ext.Msg.YESNOCANCEL,
		fn: function (btn){
			if (btn == 'yes')
				Ext.Msg.alert('Reponse', 'Cool') ;
			if (btn == 'no')
				Ext.Msg.alert('Reponse', 'Pourquoi pas?') ;
			if (btn == 'cancel')
				Ext.Msg.alert('Reponse', 'Aurevoir') ;
		},
		icon: Ext.MessageBox.QUESTION
	});
}) ;
</script>
 

 
<style type="text/css">
	.mon-icon {
		background: url(rss.png) no-repeat;
	}
</style>