Poum - Mot-clé - expandDe la qualité logicielle, méthodes agiles et outils logiciels libres ...2023-08-25T16:53:12+01:00Poumurn:md5:6b5c625a812aff31ffa1cd1f3648e14bDotclearOuvrir le date picker sur un autre mois que le mois courant avec ExtJS 4.1urn:md5:1bf8bc684ad3b1c5a803960b6c93ce822014-02-20T23:45:00+01:002014-02-21T18:44:19+01:00PoumDéveloppementdate pickerexpandExtJSfocusMVC<p><img src="http://philippe.poumaroux.free.fr/public/extjs.png" alt="ExtJS" title="ExtJS, fév. 2014" /></p>
<p>Quand on clique sur le calendrier d'un champ date vide avec <a href="http://philippe.poumaroux.free.fr/index.php?tag/ExtJS">ExtJS</a>, le <a href="http://philippe.poumaroux.free.fr/index.php?tag/date%20picker">date picker</a> 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 ...</p> <p>Nous nous placerons dans le cas d'une application ExtJS v4.1 en <a href="http://philippe.poumaroux.free.fr/index.php?tag/MVC">MVC</a>. Notre champ date s'appelle "jour".
Le principe est simple: on surveille les events <a href="http://philippe.poumaroux.free.fr/index.php?tag/expand">expand</a> et quand il y en a un, on met la date voulue dans le champ date.
Ensuite, dès que le champ obtient le <a href="http://philippe.poumaroux.free.fr/index.php?tag/focus">focus</a>, ce qui arrive dès qu'il est rendu, on efface le contenu qu'on vient de mettre:</p>
<pre> 'form datefield[name=jour]': {
expand: function(field) { field.setValue(new Date(1789,7,14)); },
focus: function(field) { field.setValue(undefined); }
}</pre>
<p>Bien sûr, il faut améliorer ça:</p>
<ul>
<li>en testant si le champ est bien vide avant de mettre notre date</li>
<li>en mettant une date dépendant de nos besoin (celle de l'autre champ évoqué précédemment)</li>
<li>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</li>
</ul>
<p>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 :</p>
<pre> '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); }
}</pre>