ExtJS : Afficher un titre sur les régions “collapsed”

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.