ExtJS 3: Tooltips for panel's expland/collapse icons

In ExtJS 3.X there does not exist a predefined way to asociate tooltips to the links of expand and collapse a panel inside another panel or a viewport.

I have found out the following options to achieve it in an easy way:

• The first one is to change the implementation of the ExtJS components, adding the tooltip in the corresponding element. You can see the solution in the mailing list of Sencha, but remember always to extend the ExtJS clases with your own changes instead of change the library files directly:

http://www.sencha.com/forum/showthread.php?25136-Panel-Expand-Collapse-Icon-Tooltip-Solution

• Other solution can be so simple as search the corresponding div html element and incorporate it a title field, which in most of web browsers will automatically be traduced in a tooltip:

           mainPanel = new Ext.Panel( {
                               items : [ centralPanel, rightPanel ],
                               layout : 'border',
                               ....
                               listeners : {
                                       "afterrender" : function(c) {
                                              var d =                                                    this.getEl().dom.getElementsByTagName("div");
                                              var found = 0;
                                              for (var i=0; i<d.length; i++) {
                                                      if (d[i].className.contains("x-tool-expand")) {
                                                              d[i].title = "Expand Leyend";                                                              found++;
                                                      } else if (d[i].className.contains("x-tool-collapse")) {
                                                              d[i].title = "Collapse Leyend";
                                                              found++;
                                                      }
                                                      if (found == 2) break;
                                              }
                                       }
                               }
                       });

• Finally, the solution which I have chosen is described in http://www.sencha.com/forum/showthread.php?109443-Add-tooltip-to-Expand-Collapse-icon-and-Minimize-and-Maximize-icon, which I have adapted to my case:

                       rightPanel = new Ext.Panel( {
                               region : "east",

                               collapsible: true,
                               ...
                               toggleTip: {
                                       text: "Collapse Leyend"
                               },
                               listeners : {
                                       "afterrender" : function(c) {
                                               c.toggleTip.target = c.tools['toggle'];
                                               Ext.QuickTips.register(c.toggleTip);
                                       }
                               }
                       });

                       mainPanel = new Ext.Panel( {
                               ...
                               items : [ centerPanel, rightPanel ],
                               layout : 'border',
                               toggleTip: {
                                     text: "Expand Leyend"
                               },
                               listeners : {
                                       "afterrender" : function(c) {
                                               c.toggleTip.target = 
                                                  c.layout.east.collapsedEl.dom.firstChild;
                                               Ext.QuickTips.register(c.toggleTip);                                       

                                        }
                               }
                       });