/home/florian

Si vous n’avez jamais utilisé l’EditorGridPanel d’ExtJS, le titre peut paraitre un peu obscur donc je vais commencer par rappeler ce qu’est l’EditorGridPanel ainsi que les possibilités de validation offertes par ExtJS. Enfin, l’objet principal de cet article, nous verrons comment pousser un peu plus loin les possibilités du validator en lui donnant accès aux autres colonnes de l’EditorGridPanel.

Cet article mélange donc une introduction à l’EditorGridPanel, une présentation de quelques techniques de validation et une technique avancée pour aller plus loin. Il y en a donc pour tous les niveaux, faites le tri. Lire la suite »

Le border layout d’ExtJS est excellent mais souffre quand même d’un défaut important : les régions réduites  (collapsed) n’affichent plus aucune information ce qui empêche, par exemple, de les identifier. Il serait judicieux d’afficher au moins le titre du panel réduit afin de savoir à quoi correspond cette région “masquée”.

Pour visualiser un peu le problème, vous pouvez jeter un oeil à la démo du layout sur le site d’ExtJS et cliquer sur le bouton permettant de réduire la zone “South”.  Une fois réduit, le rectangle qui représente le panel réduit n’apporte pas beaucoup d’informations…

Pour accéder à ce rectangle et y insérer ce que vous voulez :

var component = Ext.getCmp(15);
var el = component.layout.south.collapsedEl;
el.insertHtml('afterBegin','<span style="position: relative; top: 4px; left: 5px; color: #15428b; font-family: tahoma,arial,verdana,sans-serif; font-size: 11px; font-weight: bold;">Et voilà un titre</span>');

Attention : l’élément collapsedEl n’existe qu’après la première réduction du panel donc il faut jouer avec l’évènement collapse.

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 ! Lire la suite »

Je n’ai pas trouvé de méthode idéale pour rendre une expression régulière existante non sensible à la casse. Il n’y a pas de méthodes pour ça sur les objets RegExp et la propriété ignoreCase est en lecture seule.

var regex = /blabla/;
regex.ignoreCase; //false
regex.ignoreCase = true;
regex.ignoreCase; //false encore...

Donc j’ai bidouillé un peu :

var regex = /blabla/;
regex.test('Blabla'); //false
 
regex = new RegExp(regex.toString().slice(1,-1), 'i');
regex.test('Blabla'); //true

Je trouve ça un peu lourd… Connaissez-vous une autre méthode ? Suis-je passé à côté de quelque chose ?

Si vous développez en Javascript, vous savez certainement que les objets ont un prototype et qu’on peut le modifier dynamiquement. On peut ainsi ajouter des fonctionnalités aux objets standards du Javascript (la librairie Prototype en fait d’ailleurs un usage intensif). Dans cet article, je vais me concentrer sur les ajouts fait par ExtJS à Function.

Lire la suite »

Pour vous y retrouver dans vos tonnes de lignes de sorties dans Firebug, il existe console.group !
Lire la suite »

Utiliser console.log, .debug et autres outils fournis par Firebug est très pratique mais cela génère des bugs dans les autres navigateurs, ce qui peut être très gênant… Pour éviter ça :

if (!window.console || !console.firebug)
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
 
    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}

Ma source

Voilà une nouvelle extension ExtJS. Elle permet à un bouton d’avoir plusieurs icônes qui sont permutées à chaque clic. Très utile pour un bouton toggle à deux états, on peut aussi l’utiliser pour un bouton cyclique avec autant d’états que l’on veut. Avant de regarder le code, vous pouvez jetter un oeil à la démo.

Lire la suite »

Petite mise à jour de mon extension ExtJS LoadButton…
Lire la suite »

Lorsqu’on crée un bouton avec ExtJS, par exemple un bouton de toolbar (xtype : ‘tbbutton’), on peut préciser un handler qui est une fonction à exécuter quand on clique sur le bouton. Comme il arrive que le handler soit une action asynchrone (avec un appel AJAX par exemple), j’ai réalisé une petite extension qui permet de remplacer l’icône d’un bouton par une icône de chargement pendant que le handler s’exécute. Avant de regarder le code, vous pouvez directement tester la démo.

Lire la suite »