J’ai fait l’essaie dernièrement de EXTJS une librairie AJAX qui s’accorde bien avec la librairie YUI de YAHOO. L’ensemble renferme une quantité impressionnante de fonctionnalité.
Ayant fait l’essaie de EXTJS afin de faire des formulaires, celle-ci s’avère être remarquable.
Comme ont peut voir ici : http://extjs.com/deploy/dev/examples/samples.html
Pour télécharger EXTJS: http://extjs.com/products/extjs/download.php
L’installation d’un formulaire de contact est relativement simple et est difficilement
atteignable par les bots de spam. Du au fait qu’il ne s’affiche pas en tant que tel dans le code html.
Voici un exemple de formulaire de soumission:
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init(); // ont initialise les quicktip (ex: fait affiher les messages d’erreur)
Ext.form.Field.prototype.msgTarget = ‘side’; //ont active la validation des champ
var bd = Ext.getBody();
/*
* ================ Formulaire inscription =======================
*/
//bd.createChild({tag: ‘h2′, html: Remplir le formulaire »}); // ont peut ajouter du code html avec html:
var simple = new Ext.FormPanel({
standardSubmit: true, // permet un submit standard (sans xml ou autre)
labelWidth: 180, // Largeur des Label (champ)
id:’simple’,
frame:true, //tout a l’interieur d’un frame
title: ‘Soumission’, // titre qui affiche sur le form
bodyStyle:’padding:5px 5px 0′,
width: 440,
defaults: {width: 200},
// defaultType: ‘textfield’, // ont peut mettre un type général pour les input
items: [{
xtype:'textfield', // champ texte équivaut à un input
fieldLabel:'Nom', // Nom du label
name:'nom', // nom du champ meme chose qu'en html
emptyText:'Nom', // Text affiché a l'ouverture du form
allowBlank:false // ont n'accepte pas qu'il soit vide
},{
xtype:'textfield',
fieldLabel:'Prénom',
emptyText:'Prénom',
name:'prenom',
allowBlank:false
},{
xtype:'textfield',
fieldLabel: 'Courriel',
name: 'courriel',
emptyText:'Courriel',
vtype:'email',
allowBlank:false
},{
xtype:'textfield',
fieldLabel: 'Compagnie',
name: 'compagnie',
emptyText:'Nom de la Compagnie',
allowBlank:true
},{
xtype:'textfield',
fieldLabel: 'Téléphone',
name: 'telephone',
emptyText:'No. de téléphone',
allowBlank:true
},{
xtype: 'combo', // combobox
store:[['Commercial','Commercial'],['PME','PME'],['OBNL','OBNL'],['Personel','Personel'],['Design','Design'],['Bannière','Bannière'],['Script','Script'],['Modification','Modification']], // les champs (<option en html) doivent être dans un array
fieldLabel: ‘Type’,
name: ‘type’,
editable: false,
forceSelection: true,
rowHeight: false,
lastSearchTerm: false,
emptyText:’Choisir Type…’, // une valeur par défaut
selectOnFocus:true,
triggerAction: ‘all’,
mode: ‘local’,
allowBlank:false
},{
xtype: ‘combo’,
store:[['Gabarit','Gabarit'],['Unique','Unique'],['Aucun','Aucun']],
fieldLabel: ‘Design’,
name: ‘design’,
editable: false,
forceSelection: true,
rowHeight: false,
lastSearchTerm: false,
emptyText:’Choisir Design…’,
selectOnFocus:true,
triggerAction: ‘all’,
mode: ‘local’,
allowBlank:false
},{
xtype: ‘combo’,
store:[['0','0'],['1','1'],['2','2'],['3','3'],['4','4'],['5','5'],['5 à 10','5 à 10'],['10 à 15','10 à 15'],['20 et +','20 et +']],
fieldLabel: ‘Nombre de page’,
name: ‘nbpage’,
editable: false,
forceSelection: true,
rowHeight: false,
lastSearchTerm: false,
emptyText:’Choisir Nombre de page…’,
selectOnFocus:true,
triggerAction: ‘all’,
mode: ‘local’,
allowBlank:false
},{
xtype: ‘combo’,
store:[['Contact','Contact'],['Section membres','Section membres'],['Catalogue de Produits','Catalogue de Produits'],['Panier Virtuel','Panier Virtuel'],['Système de nouvelle','Système de nouvelle'],['Liste de diffusion','Liste de diffusion'],['Moteur de recherche','Moteur de recherche'],['Galerie d\'images','Galerie d\'images'],['Gestion textes et Images','Gestion textes et Images']],
fieldLabel: ‘Script’,
name: ‘script’,
editable: false,
forceSelection: true,
rowHeight: false,
lastSearchTerm: false,
emptyText:’Choisir Script…’,
selectOnFocus:true,
triggerAction: ‘all’,
mode: ‘local’,
allowBlank:true
},{
xtype: ‘checkbox’, // un CheckBox
boxLabel : ‘Oui’,
fieldLabel: ‘Hébergement’,
name: ‘hebergement’
},
{
fieldLabel: ‘Descrption détaillé’,
name:’comment’,
xtype:’textarea’,
allowBlank: true
},
new Ext.form.Hidden({ //un champ hidden
name:’send’,
value:’send_mail’
})
],
buttons: [{
text: 'Envoyez',
handler: function() {
if (simple.form.isValid()) {
simple.form.submit({
waitMsg:'Patientez....', // pas vraiment nécessaire trop rapide pour l'affichage (plus pour les requete http_request)
handler: function() {
simple.getForm().getEl().dom.action = 'soumission.php'; //page qui vas traiter le post
simple.getForm().getEl().dom.method = 'POST'; // informer que c'est un post
simple.getForm().submit(); // bouton de submit
}
});
} else Ext.MessageBox.alert("Erreur","Formulaire incomplet."); // message d'erreur lorsque un ou des champ sont incorrectement remplis
}
}]
});
simple.render(« contact_form »); // ont fait afficher le form sur le id contact_form
});
pour afficher sur le site ont n’aura qu’a placer:
<div align= »center »>
<div id= »contact_form »></div>
</div>
entre <body> et </body>
entre <head> et </head> vous placez:
<!-- EXT JS Form Check -->
<script type="text/javascript" src="etxjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/soumission.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
// la ligne ci-bas si vous voulez le theme gris foncé sinon il est bleu par défaut!
<link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-gray.css" />
le chemin des fichiers dépand d'ou vous les avez copier!
Le fichier source du formulaire:
Loading ...
(7 votes, average: 4,14 out of 5)
