<script type="text/javascript" src="javascript/ext-base.js"></script> <script type="text/javascript" src="javascript/ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="CSS/css/ext-all.css" /> <link type="text/css" rel="stylesheet" href="CSS/css/xtheme-gray.css" />
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' } * });
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'}) }) });
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(); }
Publié par cs_pico57. Dernière mise à jour le par @karamel.
Ce document intitulé « Extjs, mini tuto et interraction avec une base de données » issu de CodeS-SourceS (https://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.
Actualités, Avis de décès, Carte de voeux, Bricolage, Coloriages, Cinéma, Coiffure, Cuisine, Déco, Dictionnaire, Horoscope, Jeux en ligne, Programme TV, Recettes, Restaurant, SMIC, Test débit, Voyage, Signification prénom