Bonjour, j'ai essayé de faire un petit script (un tuto) qui m'affiche un formulaire connexion en popup.
Ce tuto a été écrit avec ExtJS 2.1, or j'ai installé la dernière version (2.2) et j'ai 2 bugs d'affichages qui se sont ajoutés...
Je ne comprends pas d'où vient le problème.
Voici les deux versions :
[...]
(ne faites pas attention à l'encodage)
Dans la dernière version, j'ai une partie du contenu de gauche qui n'est pas centré, et un carré blanc/gris à droite (firefox). Lorsque je change les deux inclusions ext sur la page (ext-all.css et js) vers les versions 2.1 je n'ai plus ces bugs, j'en conclus qu'il y a incompatibilités entre les 2 versions
Voici mon code JS qui génère la fenêtre (le même dans les 2 version) :
J'espère que quelqu'un pourra m'aider, j'ai passé toute la soirée dessus...
Merci beaucoup.
Modifié par SolMJ (01 Oct 2008 - 20:18)
Ce tuto a été écrit avec ExtJS 2.1, or j'ai installé la dernière version (2.2) et j'ai 2 bugs d'affichages qui se sont ajoutés...
Je ne comprends pas d'où vient le problème.
Voici les deux versions :
[...]
(ne faites pas attention à l'encodage)
Dans la dernière version, j'ai une partie du contenu de gauche qui n'est pas centré, et un carré blanc/gris à droite (firefox). Lorsque je change les deux inclusions ext sur la page (ext-all.css et js) vers les versions 2.1 je n'ai plus ces bugs, j'en conclus qu'il y a incompatibilités entre les 2 versions
Voici mon code JS qui génère la fenêtre (le même dans les 2 version) :
//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,
autoHeight:true,
labelWidth: 135, //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: '<a class="lien" href="recup.php">Mot de passe oublié?</a>',
//dans les balises html: on peut mettre n'importe quel code html
bodyStyle:
{
paddingTop: '20px'
}
},{
html: '<a class="lien" href="inscrip.php">Créer un nouveau compte</a>'
}]
});
//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,
autoHeight:true,
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 ! ************//
width:450,
closable: true,
autoHeight:true,
modal: true, //Grise automatiquement le fond de la page
closeAction:'hide',
items: login_total //On met dans cette fenêtre le panel précédent
});
}
function show_win_login(){
win_login.show();
}J'espère que quelqu'un pourra m'aider, j'ai passé toute la soirée dessus...
Merci beaucoup.
Modifié par SolMJ (01 Oct 2008 - 20:18)