Ext JS - Learning Center

Tutorial:Using Calendar (French)

From Learn About the Ext JavaScript Library

Jump to: navigation, search


Summary: Utilisation du calendrier
Author: Christian M. Castillo Estrada (Traduction: Damien Serve)
Published: January 1, 2009 (Traduction: 27/02/2009)
Ext Version: 2.x
Languages: en.png Englishfr.png French

Contents

Préface

Ce tutoriel va vous monter comment utiliser un calendrier via un champ date (DateField) et comment paramétrer le format des dates. Il démontre également comment insérer une date en utilisant PHP / MySQL. J'espère qu'il vous sera utile !

Pour commencer

Je présume que vous connaissez déjà PHP/MySQL. Je vais vous expliquer comment insérer une date en utilisation l'objet DateFiled d'Ext, j'ai donc créé une table FRIENDS dans laquelle nous allons enregistrer la liste de nos amis (nom et date de naissance). Imaginons que le point d'entrée de notre application soit le fichier index.html, structuré comme suit:

<html>
	<head>
	<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">	
	<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext-all.js"></script>
	<script type="text/javascript" src="mycalendar.js"></script>	
	</head>
	<body></body>
</html>

Vous devez bien-sûr modifier les chemins d'accès à votre répertoire Ext.


Le code ExtJs mycalendar.js 

// Variables globales
var MyForm;
var MyWindow;
var Txt_Name;
var Txt_BirthDate;
 
Ext.onReady(function(){
    Ext.QuickTips.init();
 
function saveNewFriend(){       
 
      Ext.Ajax.request({   
        waitMsg: 'Merci de patienter...',
        url: 'db_friends.php',
        params: {
                  Name:      Txt_Name.getValue(),
                  BirthDate: Txt_BirthDate.getValue().format('d/m/Y')
        }, 
        success: function(response){              
          var result=eval(response.responseText);
          switch(result){
          case 1:
                  Ext.MessageBox.alert('OK','Votre nouvel ami a été créé.');
                  MyWindow.hide();
                  break;
          default:
                  Ext.MessageBox.alert('Erreur','Impossible de créer votre ami.');
                  break;
          }        
        },
        failure: function(response){
          var result=response.responseText;
          Ext.MessageBox.alert('Erreur','Impossible de se connecter à la base de donnée.');
        }                      
      });
}
 
 
Txt_Name = new Ext.form.TextField({
    id: 'Name',
    fieldLabel: 'Nom',
    minLength : 1,
    maxLength: 20,
    selectOnFocus: true,
    allowBlank: false,
    anchor : '80%',
    maskRe: /([0-9]+)$/
});
 
Txt_BirthDate = new Ext.form.DateField({
    id: 'BirthDate',
    fieldLabel: 'Date de naissance',
    vtype: 'daterange',
    format: 'd/m/Y',
    allowBlank: false,
    anchor : '32%'
});
 
MyForm = new Ext.FormPanel({
	labelAlign: 'top',
	frame:true,
	bodyStyle:'padding:5px 5px 0',
	width: 390,
	buttonAlign:'right',
	items: [Txt_Name, Txt_BirthDate],
	buttons: [{
		text: 'Enregistrer',
		handler: saveNewFriend
	},{
		text: 'Annuler',
		handler: function(){
			MyWindow.hide();
		}
	}]
});
 
MyWindow = new Ext.Window({
      id: 'MyWindow',
      title: 'Nouvel ami',
      closable:true,
      width: 350,
      height: 240,
      plain:true,
      layout: 'fit',      
      items: MyForm,
      form:  MyForm.getForm(),
      listeners: {
		"show" : function() {
			var firstElem = MyForm.getForm().findField(0);
			firstElem.focus.defer(150, firstElem);				
		}
	}
});  
 
});

Ext.form.DateField

Cette classe fourni un champ de saisie de date avec un sélecteur de date (Ext.DatePicker) et une validation de date automatique. Vous pouvez paramétrer le format de date 'd/m/Y' et la valeur par défaut.

Txt_BirthDate = new Ext.form.DateField({
    id: 'BirthDate',
    fieldLabel: 'Date de naissance',    
    format: 'd/m/Y',                  <---- Format d/m/Y, Y-m-d, y-m-d ... 
    value: new Date('02/01/2009'),    <---- Valeur par défaut
    minValue: '02/01/2009',           <---- La date minimum autorisée
    maxValue: '31/01/2009',           <---- La date maximum autorisée
    allowBlank: false,
    anchor : '32%'
});

Voir la documentation de la classe DateField pour plus d'informations ou d'options de configuration.

db_friends.php

Le code suivant montre comment se connecter à la base de donnée pour créer nos amis. Nous devons d'abord nous connecter à la base, le processus de création d'un enregistrement, puis enfin l'encodage de la date.

<?php
 
// Connection à la base de donnée
mysql_connect("localhost", "root", "pass") or die("Impossible de se connecter: ". mysql_error());
mysql_select_db("example");
 
 
//Insertion de notre nouvel enregistrement dans la base
  $p1 = $_POST['Name'];
  $p2 = encodeDate($_POST['BirthDate']);
 
  $query = "INSERT INTO my_friends (Name, BirthDate) VALUES ('$p1','$p2')";
  $result = mysql_query($query);
  echo '1';
 
 
//Cette fonction encode une date au format au format (dd/mm/YYYY) en (YYYY-mm-dd)
function encodeDate ($date) {
  $tab = explode ("/", $date);
  $r = $tab[2]."-".$tab[1]."-".$tab[0];
  return $r;
}
 
?>

Comme vous pouvez le voir, la fonction encodeDate converti notre date dans le format de date MySQL qui est YYYY-mm-dd. Vous devez toujours utiliser ce format pour les champs de type date dans MySQL.

J'espère que ce tutoriel vous aura aidé à découvrir la classe DateField.

Christian M. Castillo (Mexico)
christianmce@gmail.com.

Retrieved from "http://www.extjs.com/learn/Tutorial:Using_Calendar_(French)"
  • This page was last modified on 27 February 2009, at 09:27.
  • This page has been accessed 1,449 times.