Extjs, mini tuto et interraction avec une base de données
Introduction
Définition
Ext est une bibliothèque Javascript permettant de construire des applications web interactives. C'était au départ une extension à la bibliothèque Javascript YUI de Yahoo, Ext peut maintenant être utilisée avec les bibliothèques Prototype, JQuery ou encore toute seule. Ext apporte un certain nombre de composants visuels d'une grande qualité comme des champs de formulaires avancés, des arbres, des tableaux, menu et barre d'outils, onglets, boites de dialogue. La version 2.0 est de sortie le 4 décembre 2007. Il s'agit d'une amélioration majeure de la bibliothèque.
Source : http://fr.wikipedia.org/wiki/Ext
Commentl'utiliser en HTML
La première phase consiste à télécharger le SDK complet contenant toutes les sources du framework.
http://extjs.com/products/extjs/download.php
Ensuite, deux fichiers seront impérativement appeler dans nos pages, à partir desquels, presque toutes les fonctionnalités pourront être utilisées (excepté l’Ajax avec les jquery, se trouvant dans un dossier annexe du Sdk, ou la bibliothèque scryptaculous permettant du design …)
Voici donc les lignes à rajouter
<script type="text/javascript" src="javascript/ext-base.js"></script> <script type="text/javascript" src="javascript/ext-all.js"></script>
Ensuite, un design complet est fournit d’office dans le kit, il est donc préférable de copier le contenu des ressources d’ext jS ainsi que le CSS ext-all.css
<link type="text/css" rel="stylesheet" href="CSS/css/ext-all.css" /> <link type="text/css" rel="stylesheet" href="CSS/css/xtheme-gray.css" />
Ce second CSS concerne le design des popups du site
Ensuite, pour créer les fonctions désirées, référez vous au site http://dev.sencha.com/deploy/ext-4.0.0/examples/
Qui fournit de nombreux exemples de l’utilisation d’extJS.
Comment interagir avec une base de données
Voici le point clé; de ce tutoriel, en effet, très peu de documents sur internet relatent cette partie pourtant capitale dans l'utilisation de extJS.
Dans notre exemple, nous allons créer une fenêtre de login, puis tester si l’utilisateur est enregistré dans la base de données. (voir chapitre 3)
Voici un lien pour télécharger directement les sources de ce tuto : http://cv.pierrehoffmann.free.fr/mini%20tuto%20extJS.rar
Procédure
1ère étape : créer le fichier javascript login.js
Tout d’abord, créons notre formulaire à l’aide d’extJS
//Login, il s'agit d'un panel contenant le formulaire avec les champs login, password...
var login = new Ext.FormPanel({
id: 'login', //id de la fenêtre
frame: true, //pour que tous les items soient dans la même frame
autoWidth: true, //largeur de la fenêtre
autoHeight: true, //hauteur de la fenêtre
labelWidth: 110, //largeur des labels des champs
defaults: {width: 230}, //largeur des champs
labelAlign: 'right', //les labels s'aligneront a droite
bodyCfg: {tag:'center', cls:'x-panel-body'}, //on aligne tous les champs au milieu de la fenêtre
bodyStyle: 'padding:5p;margin:0px; ',
items: [{ //Ici, on affiche à la suite tous les champs que l'on veut mettre
xtype: 'textfield', // = champ de texte
fieldLabel: 'Adresse Email', // = label de description du champ
id: 'email',
name: 'email',
vtype: 'email', //Vérification type : met un masque d'adresse email sur ce champ
vtypeText: 'Votre adresse email doit être de la forme de "user@domain.com"',
//message si email non valide
allowBlank: false, //champ obligatoire pour poster le formulaire
blankText:"Veuillez saisir votre adresse email." //message si le champ n'est pas rempli
},{
xtype: 'textfield',
fieldLabel: 'Mot de passe',
id: 'pass',
name: 'pass',
allowBlank: false,
inputType: 'password',
blankText:"Veuillez saisir votre mot de passe."
},{
xtype:'checkbox',
boxLabel : ' ',
fieldLabel: 'Se souvenir de moi',
checked: true,
style: 'left:-104px;position:relative;',
name: 'save'
},{
xtype: 'button',
text: 'Se connecter',
handler: fct_submit //fonction à appeler lorsque l’on clique sur le bouton
},{
xtype: 'hidden', //Balise cachée afin de dire qu'il s'agit d'une connexion
id: 'connexion',
name: 'connexion'
},{
html: 'Mot de passe oublié?',
//dans les balises html: on peut mettre n'importe quel code html
bodyStyle:
{
paddingTop: '20px'
}
},{
html: 'Créer un nouveau compte'
} *
});
Voila notre formulaire créé. Afin de rendre le design plus attrayant, nous allons ajouter un nouveau panel contenant une status bar. Il s’agit d’une petite ligne en bas à gauche de la fenêtre affichant l’état de la connexion : « formulaire valide, connexion réussie, mot de passe incorrect … »
//Ce panel contiendra le panel précédent qui est le formulaire, sauf qu'en bas de celui ci figure la status bar, permettant d'afficher le status de la connexion (chargement ....)
var login_total = new Ext.Panel({
autoWidth: true, //largeur de la fenêtre
autoHeight: true, //hauteur de la fenêtre
layout: 'fit',
items: login, //On met dans ce panel le panel de login
bbar: new Ext.StatusBar({
id: 'form-statusbar',
defaultText: 'Prêt',
plugins: new Ext.ux.ValidationStatus({form:'login'})
})
});
Enfin, créons la fonction qui va instancier la fenêtre contenant ce panel
var win_login;
if(!win_login){ //Si la fenêtre de connexion n'existe pas, on la crée
win_login = new Ext.Window({
title: 'Authentification', //titre de la fenêtre
el:'popup_log_window',
//********* el = id du div dans le code html de la page qui contiendra la popup ! ************//
layout:'fit',
width:400,
autoHeight: true, //hauteur de la fenêtre
modal: true, //Grise automatiquement le fond de la page
closeAction:'hide',
plain: true,
items: login_total //On met dans cette fenêtre le panel précédent
});
}
function show_win_login(){
win_login.show();
}
Voila le résultat
A voir également
- Extjs
- Extjs tutorial - Meilleures réponses
- Ext-base.js - Meilleures réponses
- DataGrid extJS évoluée - Conseils pratiques - Javascript
- Javascript : Geolocalisation via google map. composant extjs 3.3.1 - CodeS SourceS - Guide
- Mémorisation emplacement portal (ExtJs) ✓ - Forum - Javascript / DHTML
- Extjs ✓ - Forum - Javascript / DHTML
- Extjs php et html, je v faire des cauchemards moi !!! ✓ - Forum - Javascript / DHTML
Ce document intitulé « Extjs, mini tuto et interraction avec une base de données » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.