APEX navigation bar in sexy extJS toolbar...

It's been a while ;).... But i have a lot of new APEX and ExtJS stuff to blog about. I've been working on a complete extJs based template for my latest APEX project... So here is my first part of the upcoming series.... It's about how to get the usual apex navigation bar to show up in a sexy extJS toolbar...
There are 3 options i always have in my toolbar - logout, help, home... I usually use image buttons, so my definition looks something like this...


And in more detail....

Now we have to build up a little JSON object via navigation bar template.... This is what i put in my page template....

navigation bar

[{
  xtype: 'box',
  el: 'my_reg_pos_08'
},'->'#BAR_BODY#]

navigation bar entry

,{
  xtype: 'box',
  autoEl: {
    tag: 'a',
    href: '#LINK#',
    cn: '<img src="#IMAGE#" alt="#TEXT#" />',
    title : '#TEXT#'
  }
},{xtype: 'tbspacer', width: 10}

As you can see, I build the complete json string to define my toolbar items.... I also include one of my region-position-divs (defined in the body below), because i need a bit of form-magic inside my toolbar....
The body looks something like this...

body

<div id="my_nav_bar"></div>
<div id="myTabs"></div>
<div id="my_messages">#GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE#</div>
<div id="my_box_body" width="100%">#BOX_BODY#</div>
<div id="my_reg_pos_01">#REGION_POSITION_01#</div>
<div id="my_reg_pos_02">#REGION_POSITION_02#</div>
<div id="my_reg_pos_03">#REGION_POSITION_03#</div>
<div id="my_reg_pos_04">#REGION_POSITION_04#</div>
<div id="my_reg_pos_05">#REGION_POSITION_05#</div>
<div id="my_reg_pos_06">#REGION_POSITION_06#</div>
<div id="my_reg_pos_07">#REGION_POSITION_07#</div>
<div id="my_reg_pos_08">#REGION_POSITION_08#</div>

<script type="text/javascript">
Ext.onReady(function(){
   var nb = #NAVIGATION_BAR#;
   var tb = new Ext.Toolbar({renderTo: 'my_nav_bar', items: nb});

var myform = new Ext.ux.FormViewport({
        layout:'border',
        items:[new Ext.Panel({
                    region:'north',
                    id: 'my_toolbar',
                    height: 40,
                    collapsible: false,
                    margins:'0 0 0 0',
                    allowDomMove:false,
                    tbar: tb                  
                   }),new Ext.Panel({
                    region:'south',
                    id: 'footer',
                    height: 22,
                    collapsible: false,
                    margins:'0 0 0 0',
                    html:'<div id="DeveloperToolbar"></div>'        
                   }),
              new Ext.Panel({
            region:'west',
            id:'my_info',
            title:'Info',
            split:true,
            width: 220,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins:'40 0 5 5',
            cmargins:'40 0 5 5',
            contentEl: 'my_reg_pos_01',
            layoutConfig:{
                animate:true
            }
        }),new Ext.Panel({region:'center',
            margins:'40 5 5 5',
            id: 'my_workarea',
            items: [tabs],
            layout : "fit"
        })
              ]
    });
});
</script>

I don't use any usual html table layout. I only define a bunch of div regions according to the region positions, messages, navigation bar etc...
In the onReady-function i use the #NAVIGATION_BAR# substitution string to put my created json string inside a variable.

var nb = #NAVIGATION_BAR#;

Then i use nb as item parameter for my toolbar object ...

var tb = new Ext.Toolbar({renderTo: 'my_nav_bar', items: nb});

After that i am able to use tb in my actual page layout.... If everything works, it shoul look something like this....

In case your wondering... I used the customized viewport from Mark Lancaster to make sure, that my elements stay inside my apex form...
To get my developer toolbar inside the footer i used another tip from Mark, which you find here...