j suis decidement trop fort
il existe plusieurs autres tutos dont celui qui ma sorti du couloir sans fin (le seul qui est été pour moi efficace) d'autant plus qu il sagit de la version 3.0.0
ce qui n'est pas négligeable quand on sait que les autres ne files pas le zip avec, lol
Voilà le lien: http://www.objis.com/formation-java/...jax-extjs.html
Et hop ! une pierre à l'edifice ^^ :mouarf:
tuto vite fait que j'ai pas trouvé sur la toile ^^
alors j'ai enfin compris comment on pouvait utiliser la bibliotheque extjs 3.0
Je vais vous expliqué vite fait comment faire pour créer une "alert" digne de ce nom:
il faut d'abord telecharger bien sur le zip:http://extjs.com/products/extjs/download.php
ensuite allez à "extjs\ext-3.0.0\examples\message-box"
double cliquez sur msg-box.html
vous avez là tous les messages box disponible, choisissez en un en visuel et allez le chercher dans le code source.
Ouvrez notepad par exemple ou un autre editeur de texte et faites le menages avec ce qui ne vous plait pas (le surplus)
Attention à bien enlever en meme temps chaque correspondance javascript je m'explique si j'enleve:
Code:
1
2
3
4
5
| <p>
<b>Confirm</b><br />
Standard Yes/No dialog.
<button id="mb1">Show</button>
</p> |
alors j'enleve aussi:
Code:
1
2
3
| Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
}); |
etc... jusqu'à que le code soit bien nettoyer et qu'il ne reste plus que votre interet, perso dans ma page il ne me reste plus que:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MessageBox</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="msg-box.js"></script>
<link rel="stylesheet" type="text/css" href="../examples/shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples/shared/examples.js"></script>
<h1>Test alert</h1>
<p>
<b>Alert</b><br />
message d'alert standard
<button id="mb8">Show</button>
</p>
</body>
</html> |
et pour la page Js:
Code:
1
2
3
4
5
6
7
| Ext.onReady(function(){
Ext.get('mb8').on('click', function(){
Ext.MessageBox.alert('Message envoyé', 'Vous allez etre diriger vers l\'acceuil...');
});
}); |
Voilà, le code est epuré, reste plus qu'à adapter le tout à ce dont j'ai besoin.
A oui encore une chose, je vous conseille d'uploader toute la librairie sur votre site, j'ai bien essayé de ne mettre que les fichiers qui me plaisait dans un seul et meme dossier mais le css appel lui aussi d'autre fichiers alors bon...
on uploade le tout et change les url et vous voilà avec une vrai alert javascript plutot que la très ancienne et depassé qui doit daté d'environ... enfin bon, j'me comprend ^^
Voilà, j'espere avoir donné un coup de main ne serait ce qu'à une personne qui comme moi ne comprenait pas grand chose encore hier soir sur cette fameuse librairie.
A+ all
1° Ps: pour les pros, ce tutos n'a l'air de rien mais perso je serais tomber dessus hier, j'aurais gagné pas mal d'heure ^^
2° Ps: pour les messages box, il n'est pas nécessaire de passer par un serveur mais pour pas mal d'autre fonctions il vous faudra utiliser wamp ou votre serveur direct à cause des requêtes ajax surement (jamais tester ajax :p).
3° Ps qui suit le 2°: ouvrez directement extjs avec wamp pour vous rendre compte de ce qu'est la librairie extjs et voyez comme ils vous présentent les choses. ça n'est qu'un conseil mais tout est conçu pour ça à la base...
