ExtJS : changer le style d’un bouton dynamiquement

ExtJS est assez riche au niveau des boutons et permet de contrôler finement leur aspect à l’instanciation. Il est possible d’indiquer une icône (ou une classe qui mettra l’icône en background), d’ajouter un texte, de choisir si l’icône est à gauche, à droite, au dessus ou en dessous du texte. Les boutons peuvent avoir 3 tailles différentes (small, medium et large) et on peut associer un menu à un bouton ce qui se matérialise par une petite flèche sur le bouton que l’on choisit de placer à droite ou en dessous. Cela donne beaucoup de combinaisons possibles que vous pouvez voir en démo ici : http://www.extjs.com/deploy/dev/examples/button/buttons.html

Malheureusement, une fois ces superbes boutons créés, il n’est plus possible de modifier grand chose… Vous pouvez encore changer la classe qui met l’icône en background (unBouton.setIconClass(‘icon-class’); ) mais impossible de changer la taille du bouton, le placement de l’icône ou celui de la flèche du menu. De même, si un bouton n’a pas d’icône à la création, en ajouter une après coup va poser problème.

J’ai donc ajouté une petite méthode à la classe Ext.Button qui permet de changer tout ça même après la création des boutons !

Le code

Ext.override(Ext.Button,{
    changeStyle:function(o){
        //remove old styles
        var targs = this.getTemplateArgs();
        //main cls
        this.el.removeClass(targs[3].split(' '));
        //scale and iconAlign
        this.el.child('tbody').removeClass(targs[4].split(' '));
        //iconCls
        this.el.child(targs[1]).removeClass(targs[2].split(' '));
        //arrowAlign
        this.el.child('em').removeClass(targs[5].split(' '));
 
        //apply conf and add new styles
        Ext.apply(this,o);
        targs = this.getTemplateArgs();
 
        this.el.addClass(targs[3]);
        this.el.child('tbody').addClass(targs[4]);
        this.el.child(targs[1]).addClass(targs[2]);
        this.el.child('em').addClass(targs[5]);
 
    }
 
});

En bref :

• Ext.override permet d’ajouter une méthode à la classe Ext.Button (valable même pour les instances créées avant l’override)
• On passe en paramètre un objet indiquant la nouvelle configuration, par exemple :
  ^?View Code JAVASCRIPT

  { scale:'large', iconCls:'big-icon', iconAlign:'top', arrowAlign:'bottom' }

• On supprime les styles actuels (récupérés grâce à getTemplateArgs() et retirés avec removeClass())
• On applique la nouvelle configuration (Ext.apply())
• On recalcule les styles (getTemplateArgs()) et on les applique (addClass())

Retrouvez ce code et ses éventuelles mises à jour sur GitHub.

Utilisation

Sur un bouton donné (monBouton), pour le rendre grand, avec l’icône adaptée, placée au dessus du texte et avec la flèche du menu en bas :

monBouton.changeStyle({
    scale:'large',
    iconCls:'add',
    iconAlign:'top',
    arrowAlign:'bottom'
});

Démo

J’ai repris la démo des boutons d’ExtJS, vous n’avez qu’à cliquer sur les boutons pour changer leur style ! http://fcargoet.evolix.net/demos/extjs/ExtJS-Button-changeStyle/