1. Accueil
  2. Tutoriels
  3. Javascript

Extjs, mini tuto et interraction avec une base de données

Dernière mise à jour le par @karamel .

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

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