Moving the Developer toolbar with ExtJS

Received and email on my blog, asking how to move the developer toolbar into the "south" region of a typical ExtJS layout. This is one of those annoyances developers see, but the end users don't. For a screenshot see my post from last year here. The solution is very short: In your page template include a div tag with an id, this is where you want the toolbar to end up. e.g. <div id="DeveloperToolbar"></div> Add the following code into your application javascript:

Ext.app.moveDeveloperToolbar = function() {
  var dest = Ext.get('DeveloperToolbar');
  if (dest) {
      var els=Ext.select("table[summary='Developer Toolbar']",false);
      els.each(function(el){
          el.replace(dest);
      })
  }
}


Ext.onReady(function() {
    /** any other stuff you want to include */   
    Ext.app.moveDeveloperToolbar();
});

The code checks the div tag exists, and then searches for a table with a summary property of "Developer Toolbar". For each instance it finds (there is only ever one), it moves it to the destination position. ExtJS has a powerful DomQuery component, well worth learning. See the DomQuery tutorial for further examples. Mark