ExtJS

Quand on clique sur le calendrier d'un champ date vide avec ExtJS, le date picker s'ouvre systématiquement sur le mois et l'année courant. Mais il peut qu'on veuille qu'il en soit différemment, par exemple pour un champ date de fin d'une période dont le début est indiqué dans un autre champ date par exemple ...

Nous nous placerons dans le cas d'une application ExtJS v4.1 en MVC. Notre champ date s'appelle "jour". Le principe est simple: on surveille les events expand et quand il y en a un, on met la date voulue dans le champ date. Ensuite, dès que le champ obtient le focus, ce qui arrive dès qu'il est rendu, on efface le contenu qu'on vient de mettre:

   'form datefield[name=jour]': {
       expand: function(field) { field.setValue(new Date(1789,7,14)); },
       focus: function(field) { field.setValue(undefined); }
   }

Bien sûr, il faut améliorer ça:

  • en testant si le champ est bien vide avant de mettre notre date
  • en mettant une date dépendant de nos besoin (celle de l'autre champ évoqué précédemment)
  • en n'effaçant au moment du focus que si on a mis une date avant (via une variable conservée dans le contrôleur

Première amélioration: pour éviter que le fait d'écrire ne génère un event change (ou une validation) que vous pourriez gérer par ailleurs, remplacer les setValue par setRawValue. Mais pour ça, il ne faut plus envoyer un objet Date mais la chaîne dans le format attendu. En admettant que vos champs date sont configurés avec le format 'd/m/Y', ça donne :

   'form datefield[name=jour]': {
       expand: function(field) { field.setRawValue( Ext.Date.format( new Date(1789,7,14), 'd/m/Y' ) ); },
       focus: function(field) { field.setRawValue(undefined); }
   }