ExtJS 2+ Navigation Plugin for creating simple site navigation.
I use the ExtJS library a lot. In using the library I found in 3.0 they support a grouptab panels. Unfortunately, I am still working on 2.2 and needed a similar solution that is compatible with both ExtJs 2.2 & Ext 3.0. My goal was to build a clean navigation similar to ExtJS 3.0 groupTabPanel option. What I came up with was small extension on the library that works with Ext2.2+ and will allow me to upgrade later without having to change any code. Below you an see an image of the example of NavPanel my first ExtJS extension.
NavPanel example screen shot.
Features
- Clean/Fast Navigation creation with minimal code.
- Can support multiple navigation panels on same page each target to different Panel.
- Supported by ExtJS 2.2+
- Syntax similar to other Ext Objects.
- Menu layout adjustable (including icon positioning)
Usage
Here is a simple code example usage of the extension:
Basic Example Usage
viewPt = new Ext.Viewport({
layout: 'border',
border: false,
items: [{
xtype: 'panel',
region: 'west',
border: false,
bodyStyle: 'background-color: rgb(40, 120, 50);',
width: 200,
items: [{
xtype: 'navpanel',
width: 150,
panelXAlign: 'right',
yOffset: 10,
menuItemAlign: 'left',
activePanel: true,
target: 'centerpanel',
defaultItem: 1,
items: [{
header: true,
text: 'My 1st ExtJS Ext',
iconCls: 'myspecial_header'
},{
text: 'Ext.ux.NavPanel',
icon: 'asterisk_yellow.png',
items: [{
xtype: 'panel',
width: 500,
height: 200,
style: 'padding: 10px;',
title: 'Sample Panel',
html: 'something special'
}]
}]
}]
},{
xtype: 'panel',
id: 'centerpanel',
style: 'padding: 10px',
height: 500,
width: 600,
border: false,
region: 'center'
}}
});
Files
This zipfile contains all the resources used in the included example file (example.html) and the NavPanel.js file itself. I did not minify the file and the code is commented to aid you along your way.
navpanel.zip
Example:
Here is a link to the example I put together demonstrating some of the different layouts and targeting.
navpanel example
Terms
Feel free to download and use however you want to. Realize this is my first true ExtJS extension built from scratch so there may be bugs that need addressed. Feel free to point them out and I will fix as time allows. All I ask if you do use this particular extension is that you leave a comment on this page on how you intend to use it or where you are going to use it, this is for my own curiosity. Enjoy!
Changelog
Feb 17 2010
** Fixed Bug with NavPanel Z-Index causing it to bleed through parent windows and masks.
No comments yet.
Leave a comment
Search
Recent
Topics
Comments
- Thank you, kind person. You have saved me a good deal of time. -- Adam Williams
IE8 Javascript external s[..] - Thanks for this code. I am using it with some modification to determine DST for any year, not just 2009. This has save -- Jonathan
Javascript: Figuring out [..] - I do not handle the 2AM switch over. This would be a minor bug. I checked your solution that would work I have never l -- ben
Javascript: Figuring out [..] - Your also doesn't seem to take into account the hour of the day. Daylight savings switch happens at 2AM... So there is -- Kevin
Javascript: Figuring out [..] - Matt corrected code has been posted. -- ben
Javascript: Figuring out [..]
Photos (view gallery)
