Tutorial pour extjs

**dasdo** · 09/07/2009, 11h53

Bonjour,

Je débute dans la programation web, et dois concevoir un site avec le framework Extjs. Quelqu'un aurait-il un un lien ou un cours pour bien débuter avec ce framework. J'ai fait des recherches sur le net, mais quasiment impossible d'en trouver un pour le niveau débutant...

Merci à vous

**waxx59** · 09/07/2009, 15h42

dasdo

Les seuls choses que tu peux trouver c'est la documentation de l'api
et les exemples de ext js que tu peux télécharger sur le site
http://extjs.com/
su le site extjs.eu tu as des exemples avec accès aux sources
bon courage
waxx

**dasdo** · 10/07/2009, 11h28

Merci Waxx

**nico le noob** · 15/08/2009, 04h09

salut dasdo, alors tu as compris ? parceque perso je galere pas mal ^^

**nico le noob** · 15/08/2009, 14h09

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 ^^

**nico le noob** · 16/08/2009, 00h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**juliendombret** · 10/03/2011, 15h40

Salut,
j'ai créer ce site : http://tutoriel.lyondev.fr Il y a plusieurs tutorials extjs.

a bientôt

Julien

**namavic** · 11/03/2011, 15h05

Envoyé par juliendombret

Salut,
j'ai créer ce site : http://tutoriel.lyondev.fr Il y a plusieurs tutorials extjs.

a bientôt

Julien

Intéressante initiative. Merci pour ce travail.

Une formule de type wiki, pour y rédiger des tutos en français et fédérer une communauté française autour d'Ext Js serait une bonne chose... à bon entendeur !

Tutorial pour extjs

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager