Sélecteur de date avec ExtJS, le retour

Il y a quelque temps, j'avais écrit un article qui expliquait comment ajouter des sélecteurs de date avec ExtJS à des balises input.

Cette technique peut cependant poser problème avec certaines mises en page. En effet, les balises input sont des éléments inline alors que les champs ExtJS sont encapsulés dans une balise div qui est un élément de type block.

En clair, la transformation entraine un retour à la ligne (sauf si on est dans un tableau).

Pour contourner ce problème, j'ai surchargé la méthode onRender de Ext.form.DateField pour qu'elle génère du code HTML plus simple (une simple balise img) et qui reste inline.

Wiip.DateField = Ext.extend(Ext.form.DateField,{
    onFocus: Ext.emptyFn,
    onRender: function(){
        this.trigger = Ext.DomHelper.insertAfter(this.el, {
            tag: "img",
            alt: "Calendrier",
            height: "16",
            src:"/images/date.png",
            style: "cursor: pointer; padding-left: 2px; vertical-align: text-top",
            title: "Calendrier",
            width: "16"
        }, true);
        this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
    }
});

Au passage, j'ai également désactivé la mise en surbrillance du champ lorsqu'il reçoit le focus parce que ça posait quelques problèmes.

Vous pouvez utliser le code suivant pour l'appliquer à tous les champs associés à une classe CSS date.

Ext.select('input.date', true).each(function(elt) {
    new Wiip.DateField({
        applyTo: elt.dom,
        id: elt.dom.id
    });
});

Vous noterez qu'il vous faut une image de 16 pixels de coté (ici /images/date.png) pour servir de trigger.