Montag, 8. Februar 2010

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...






Kommentare:

  1. Nice work Anja, i'll be keen to see what else you've done... what version of Ext JS are you using btw, and has your project gone live?

    AntwortenLöschen
  2. hi matt,
    i'm using extjs 3.1 right now.... and no, the project is going to go live next month....
    anja

    AntwortenLöschen
  3. Hi Anja,

    Very good work. I am very much interested to learn more about extJS what what you have done in your project.

    How can I create same layout same as yours?

    Thanks,
    Bhavin

    AntwortenLöschen
  4. Hello Anja!

    I have seen the information about your ticketsystem. Good job !

    When is the project finish ?
    Can i see an demo in the web ?

    I will came back to your homepage in the next days.

    Your sincerly

    Stephan

    AntwortenLöschen