Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

High-Tech Santé-Médecine Droit-Finances CodeS-SourceS AppsTV Inscription Plan C

High-Tech Santé-Médecine 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 Déposer un code Code Recherche Juin 2014 24 avis Haut 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 Ajouter un commentaire 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. Commentaires Inscription Conditions générales Contact Charte Recrutement Annonceurs CCM Benchmark Group Carte de voeux 2013, Cinéma, Décoration, Expeert, Horoscope, Salon littéraire, Programme TV, Cuisine (Recette), Coiffure, Restaurant, Test débit, Voyage, Hayatouki Afficher les 24 commentaires Ajouter un commentaire uploads/S4/ extjs-mini-tuto-et-interraction-avec-une-base-de-donnees-853-n53zmv.pdf