High-Tech

Sant-Mdecine
Droit-Finances
CodeS-SourceS
AppsTV
Inscription
Plan
Connexion
Identifiant
Mot de passe (oubli ?)
Connexion
Rechercher OK
Accueil
Forum
Tutoriels
Codes Sources
Snippets
Top membres
Tous les langages
Delphi / Pascal
Java
Python
SQL
RegEx
Flash
ASM
IRC
Graphisme
PDA
ColdFusion
Foxpro
Flex
Visual Basic / VB.NET
Forum
Tutoriels
Codes Sources
Snippets
Top membres
PHP
Forum
Tutoriels
Codes Sources
Snippets
Top membres
C/C++/C++.NET
Forum
Tutoriels
Codes Sources
Snippets
Top membres
Javascript
Forum
Tutoriels
Codes Sources
Snippets
Top membres
C#/.NET
Forum
Tutoriels
Codes Sources
Snippets
Top membres
ASP/ASP.NET
Forum
Tutoriels
Codes Sources
Snippets
Top membres
Services
Agenda
Annuaire des sites
Blogs
Dictionnaire de la prog
Groupes
Outils
RFC
Accueil
Connexion
Identifiant
Mot de passe (oubli ?)
Connexion
Dposer un code Code
Recherche
Juin 2014
24
avis
Haut
Extjs, mini tuto et interraction avec une base de donnes

Introduction

Dfinition
Ext est une bibliothque Javascript permettant de construire des applications web interactives.
C'tait au dpart une extension la bibliothque Javascript YUI de Yahoo, Ext peut
maintenant tre utilise avec les bibliothques Prototype, JQuery ou encore toute seule. Ext
apporte un certain nombre de composants visuels d'une grande qualit comme des champs de
formulaires avancs, des arbres, des tableaux, menu et barre d'outils, onglets, boites de
dialogue. La version 2.0 est de sortie le 4 dcembre 2007. Il s'agit d'une amlioration majeure
de la bibliothque. Source : http://fr.wikipedia.org/wiki/Ext
Commentl'utiliser en HTML
La premire phase consiste tlcharger le SDK complet contenant toutes les sources du
framework. http://extjs.com/products/extjs/download.php Ensuite, deux fichiers seront
imprativement appeler dans nos pages, partir desquels, presque toutes les fonctionnalits
pourront tre utilises (except lAjax avec les jquery, se trouvant dans un dossier annexe du
Sdk, ou la bibliothque 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 doffice dans le kit, il est donc prfrable de copier le
contenu des ressources dext 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 crer les fonctions
dsires, rfrez vous au site http://dev.sencha.com/deploy/ext-4.0.0/examples/ Qui fournit de
nombreux exemples de lutilisation dextJS.
Comment interagir avec une base de donnes
Voici le point cl; de ce tutoriel, en effet, trs peu de documents sur internet relatent cette partie
pourtant capitale dans l'utilisation de extJS. Dans notre exemple, nous allons crer une fentre
de login, puis tester si lutilisateur est enregistr dans la base de donnes. (voir chapitre 3)
Voici un lien pour tlcharger directement les sources de ce tuto :
http://cv.pierrehoffmann.free.fr/mini%20tuto%20extJS.rar
Procdure

1
re
tape : crer le fichier javascript login.js
Tout dabord, crons notre formulaire laide dextJS //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 fentre
frame: true, //pour que tous les items soient dans la mme frame
autoWidth: true, //largeur de la fentre
autoHeight: true, //hauteur de la fentre
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
fentre
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', //Vrification 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 lon clique sur le bouton
},{
xtype: 'hidden', //Balise cache 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: 'Crer 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 sagit dune petite ligne en bas gauche de la
fentre affichant ltat de la connexion : formulaire valide, connexion russie, mot de passe
incorrect //Ce panel contiendra le panel prcdent 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 fentre
autoHeight: true, //hauteur de la fentre
layout: 'fit',
items: login, //On met dans ce panel le panel de login
bbar: new Ext.StatusBar({
id: 'form-statusbar',
defaultText: 'Prt',
plugins: new Ext.ux.ValidationStatus({form:'login'})
})
});
Enfin, crons la fonction qui va instancier la fentre contenant ce panel
var win_login;
if(!win_login){ //Si la fentre de connexion n'existe pas, on la cre
win_login = new Ext.Window({
title: 'Authentification', //titre de la fentre
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 fentre
modal: true, //Grise automatiquement le fond de la page
closeAction:'hide',
plain: true,
items: login_total //On met dans cette fentre le panel prcdent
});
}
function show_win_login(){
win_login.show();
}
Voila le rsultat
Ajouter un commentaire
Ce document intitul Extjs, mini tuto et interraction avec une base de donnes 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 fixes par la licence, tant que cette
note apparat clairement.
Commentaires
Inscription
Conditions gnrales
Contact
Charte
Recrutement
Annonceurs
CCM Benchmark Group

Carte de voeux 2013, Cinma, Dcoration, Expeert, Horoscope, Salon littraire, Programme TV,
Cuisine (Recette), Coiffure, Restaurant, Test dbit, Voyage, Hayatouki
Afficher les 24 commentaires
Ajouter un commentaire